I would like to experiment with svg.js library but I cannot understand what's wrong when I try to play through snippet console...
var draw = SVG('playground').size(200, 200);
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.13/svg.js"></script>
<div id='playground'></div>
... or JSFIDDLE
Echoing Fuzzyma's response above...
You are missing the CSS selector for the element, it should be:
var draw = SVG().addTo('#playground').size(200, 200);
Hopefully that helps!
Related
I am trying to determine if my Selector is capturing the correct HTML elements. The only thing that is being outputted is the Selector object which doesn't tell me anything.
I tried to put a debugger in VScode and use the console to view the Selector.
For example if I have this HTML,
<html>
<body>
<h1>This is a test</h1>
</body>
</html>
and my Selector is as followed...
const h1 = Selector('h1');
Is there a way for me to see the HTML of the captured element? Eg; have to output
<h1>This is a test</h1>?
Debugging a Selector object in debug mode is quite difficult.
The best way I found to check if a Selector is correct is to hover over it before doing any action or assertion:
const h1 = Selector('h1');
await t
.hover(h1)
...
Then you should see the big cursor moving and hover over the selector.
I am using MaterializeCSS Framework and i am trying to make my carousel to span full width of its parent container.
My carousel appears, but is very small. I read on the documentation that it can be made full width, but everything i try just breaks the carousel.
I tried this, but to no avail:
<script type="text/javascript">$(document).ready(function(){
$('.carousel').carousel full-width="true"();
});</script>
Any advice is much appreciated.
i did like that
<div class="carousel carousel-slider">
but when i checked it on Google chrome i took
url.indexOf is not a function
error like that
what is that meaning and what did i do wrong?
$(document).ready(function(){
$('.carousel').carousel({
full_width: true
});
});
EDIT:
It's important to add class "carousel-slider", next to "carousel" div like:
<div class="carousel carousel-slider">
That is because of jQuery 3.x.x, it works fine with jQuery 2.x.x. Hope it will save your time.
Need to verify the color of the element when hovering on web elemet where the style information available in the CSS file
Sample:
<a href="foo.com" class="color-set" />
color-set {
color: #047fe9;
}
So how can i get the information from CSS file via Selenium RC
You can try to asser this:
assertTrue(Selenium.IsElementPresent("css=color-set[color:#047fe9]"));
Let me know if this helped you.
You may use execute_script to get the css. If you have jQuery:
color = driver.execute_script("jQuery('.color-set').css('background-color')")
assert_it...
If not jQuery:
color = driver.execute_script("elm = document.getElementsByClassName('color-set'); return window.getDefaultComputedStyle(elm).getPropertyValue('background-color');")
assert_it...
I'm having problem setting marker position and map center, with "Invalid value for property " error or "invalid value for property " error such as:
Error: Invalid value for property : (13.7323691218542,
100.64347976627096) Source File:
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/5/main.js Line: 26
This is based on tests on Firefox and Chrome
My top HTML contains:
Javascript function "move_it()"
An iframe (id: "mapIframe") sourced by a cgi (nwfMap.cgi)
And the "mapIframe" iframe cgi contains:
A var mapNwf for a map
A var markerMe for a marker
An iframe (id: "myInfoIframe") sourced by a cgi (nwfSetInfo.cgi)
And the "myInfoIframe" iframe cgi contains:
A call to the function "move_it()" defined in top HTML
This call is intended to move the marker (markerMe) to a specific location
and also to set the map (mapNwf) center to the same specific location
The invocation of the "move_it" was executed OK until when it tried to do:
mrk.setPosition(pos); or
mp.setCenter(pos);
It's here I've encountered the "Invalid value for property ..." errors.
The immediately preceding execution were of:
alert('mp = [' + mp.getCenter() + ']'); and
alert('mrk = [' + mrk.getPosition() + ']');
were OK with correct location (lat/lng) value displayed (map center and marker position)
So the question is, how come getCenter and getPosition worked for same map and marker variables, but the setCenter and setPosition had failed?
If getCenter and getPosition came back with correct data, it indicates that there's no variable context issues, right?
But then how come I can only "read" but not "set" the values via these variables?
Would it be related to the appearance of the google line:
in the top HTML, and in its iframe, and in the iframe's iframe?
Repetition and the nested level causing some google map context issue leading to my problem?
Much thanks in advance for any advice! Followings are relevant code portions for your examination and investigation:
Relevant portions of the top HTML
<html>
........
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script language="JavaScript">
function move_it(slat, slng) {
var ifrm = document.getElementById('mapIframe');
var mp = ifrm.contentWindow.mapNwf;
var mrk = ifrm.contentWindow.markerMe;
var pos = new google.maps.LatLng(slat,slng);
alert('mp = [' + mp.getCenter() + ']');
alert('mrk = [' + mrk.getPosition() + ']');
alert('pos = [' + pos + ']');
mrk.setPosition(pos);
mp.setCenter(pos);
}
</script>
.........
<div id="nwfMap">
<iframe width=100% height=520 frameBorder=0 src="nwfMap.cgi" name="mapIframe" id="mapIframe" scrolling=no></iframe>
</div>
........
</html>
Relevant portions of the "mapIframe" iframe (produced by nwfMap.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var mapNwf = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var latLngPre = new google.maps.LatLng(0.0, 0.0);
var markerMe = new google.maps.Marker({
position: latLngPre,
title: 'Me Here',
map: mapNwf,
draggable: true,
animation: google.maps.Animation.DROP
});
.........
</script>
.........
<div id="myInfoForm" style="display: none;">
<iframe border=1 width=100% height=200 align=center marginwidth=0 marginheight=0 seamless=seamless frameBorder=0 src="nwfSetInfo.cgi" name="myInfoIframe" id="myInfoIframe" scrolling=no></iframe>
</div>
.........
Relevant portions of the "myInfoIframe" iframe (produced by nwfSetInfo.cgi)
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
parent.parent.move_it(13.7323691218542, 100.643479766271);
</script>
The problem is fixed now, by moving the "move_it()" function definition down from the top level HTML to the mid-level iframe "mapIframe" and by changing the "move_it()" invocation in the "myInfoIframe" iframe from
parent.parent.move_it(13.7323691218542, 100.643479766271);
to
parent.move_it(13.7323691218542, 100.643479766271);
Don't know why, but obviously by the reducing of invocation context level something got corrected on the original "can read but not write on map variable" problem. If any one has a good explanation, would like to hear about it. Thanks.
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"