I'm having an issue with three custom controls I have created for a map application.
According to the API documentation:
The API places controls at each position by the order of an index property; controls with a lower index are placed first. For example, two custom controls at position BOTTOM_RIGHT will be laid out according to this index order, with lower index values taking precedence. By default, all custom controls are placed after placing any API default controls. You can override this behavior by setting a control's index property to be a negative value. Custom controls cannot be placed to the left of the logo or to the right of the copyrights.
Therefore, I added the three controls to the same position, giving each an index value, and expected them to fit accordingly.
When the controls are first loaded, they are on top of one another, instead of fitting to match their respective index values.
However, when I perform an action such as hovering over another default control (such as the zoom control), the custom controls appear correctly.
Here is what I have tried to fix the problem:
Setting the position of the controls in CSS (does not work since control positioning can only be custom if you wrap the controls)
Delaying the time for each control button to be added
Tried triggering mouseover actions of other controls since this manually shows the controls in the correct position
Any help or insight in appreciated. I know I mentioned wrapping the controls allows for custom position (according to here), but is there any other way I can get this to work without doing so?
My apologies, I tried uploading screenshots but apparently I am not popular enough. Here is a JsFiddle.
The JsFiddle shows how I am adding these controls only when the user has selected a specific input:
$('#toggle').on('click', function(){
if ($(this).is(':checked')){
$(pointSelDiv).css('display', 'block');
$(polySelDiv).css('display', 'block');
$(circSelDiv).css('display', 'block');
}else{
$(pointSelDiv).css('display', 'none');
$(polySelDiv).css('display', 'none');
$(circSelDiv).css('display', 'none');
}
});
Thanks again!
This is happening because Google Maps API needs to know the width and the height of your control elements to know where to position them - when the map is rendered. By initially setting them to display: none, you are hiding it from the actual layout of your page as well - it's as if the element's not there. Use visibility: hidden instead - setting the visibility to hidden will still hide the element on the screen, but it is still present in the layout. For reference: http://www.w3schools.com/css/css_display_visibility.asp
Also, I suggest rather than individually setting these CSS attributes to your custom control elements, add a class (you can do this via jquery's .addClass()) to these elements and toggle just by targeting the class. I've updated your jsfiddle here.
Related
I'm trying to implement GetOrgChart with asp.net mvc in a complex scheme but stuck with some issues...
I need to remove top search bar. Tried to do this adding "display-none" to generated div's css class. But this resulted in main svg not filling screen, 'cause it's padding gets set to some value from inline styling.
Is there any way to access add/edit/delete/view buttons' click handlers? I want to display a custom page for each operation. And can we disable individual buttons (i.e. add or edit) selectively?
In order to remove the top bar you have to change the theme, lets assume that you are using "ula" theme, remove the top bar set getOrgChart.themes.ula.toolbarHeight = 0;
Regarding your second question use the following example as starting point:
http://www.getorgchart.com/Demos/Custom-Edit-Form
I have removed the toolbar by overriding it's css
.get-org-chart .get-oc-tb {
display: none;
}
During some web scraping with Selenium WebDriver with Chrome, I encountered a page that has fixed regions (they do not scroll but stay fixed relative to the window). Oftentimes when I request that the web browser scroll to a particular control using Actions.MoveToElement() , the element winds up being obscured by one of the fixed regions. When Selenium clicks on an obscured element, the fixed region steals the click and my control does not get clicked.
The fixed regions have a class=SomeFixedPositionStyle. To get around this, I'd like to have Selenium inject Javascript code to go through each style on the page and modify it to set position:static if it's position:fixed. How can I do this?
I chose to not modify the class attribute of the fixed elements because the act of scrolling the page resets the class attribute to the original value that has the fixed style.
For example, take a look at http://www.ishares.com/us/products/239572/ishares-jp-morgan-usd-emerging-markets-bond-etf . As you scroll up and down, do you see the bands on the top and the bottom are fixed?
When I try to scroll to element //*[#id="holdingsTabs"]/ul/li[3] (this is the "All" link in the "Holdings" section, it winds up underneath the lower fixed region and cannot be clicked on.
You can inject a style rule into the page
var sheet = document.styleSheets[0];
sheet.insertRule("SomeFixedPositionStyle { position: static!important; }", 1);
What usually helps in situations like this is scrolling into view of an element:
driver.executeScript("arguments[0].scrollIntoView();", element);
You may also get rid of the "stickiness" by dynamically changing the "position" of the wrapper:
var wrapper = driver.findElement(webdriver.By.css('.sticky-wrapper'));
driver.executeScript("arguments[0].style.position = null;", wrapper);
i'm using media element player on my page. I have a div that i want to show\hide according to the control bar state - visible or not. I see the script (mediaelementplayer.js) has some way for doing that but i can't get it right:
// any additional controls people might add and want to hide
t.container.find('.mejs-control')
.css('visibility','visible')
.css('display','block');
I've tried adding class="mejs-control" but it doesn't work.
I have an html5 page with a dropdown menu using mootools. It's working if I use the hide() and show() functions. But, I want the menu's to slide in and out, like this:
var m = e.getElement(".dropdown-menu, .sidebar-dropdown-menu");
if (e.hasClass('active')) {
m.hide();
e.removeClass('active');
} else {
m.show();
e.addClass('active');
}
Instead of hide and show I want slideIn and slideOut:
var m = new Fx.Slide(e.getElement(".dropdown-menu, .sidebar-dropdown-menu"));
if (e.hasClass('active')) {
m.slideOut();
e.removeClass('active');
} else {
m.slideIn();
e.addClass('active');
}
Working example: http://jsfiddle.net/wzzeZ/
Not working: http://jsfiddle.net/37V53/1/
It's not throwing errors; where do I look to fix it?
There are a few things going on here.
First of all, you're not seeing any errors because there are none. If you litter the code with console.log() calls, they all run.
It's a style issue that's preventing the menus from displaying.
The FX.Slide Class in Mootools doesn't seem to explicitly set the 'display' property of the element you're sliding to block. You still need to call .show() for it to work.
Next, if you check out the docs for FX.Slide, you'll notice that it creates a wrapper element to do the slide effect (the container is needed for the height animation, overflow: hidden, etc.)
Unfortunately that seems to be messing with the positioning of the menu, which is positioned relatively to its containing element - but the containing element has height and overflow: hidden styles which then hide the menu (not to mention, even if you could see it, it's in the right place).
To see what I'm talking about check out this updated Fiddle here: http://jsfiddle.net/37V53/2/
If you run that in Firefox with Firebug, and you hover your cursor over the element that's logged to the console, you'll see Firebug's blue hilight appearing where your element actually is being displayed - in the middle of the window, and hidden from view.
This is a combination of assumptions made in the MooTools Classes you're using working against each other; You'll probably be better off writing your own (simple) slide-out script using FX.Tween rather than FX.Slide.
I created a sample of how to do this based on the original Fiddle (that works) - http://jsfiddle.net/LkLgk/
Trick is to show the element to the browser but not the user (by setting visibility: hidden before display: block, grab the height, set height to 1px, visibility back to visible, then tween the height to the previously detected value.
Hope that points you in the right direction; remember, when in doubt, console.log everything!
This code in the book jQuery in action, on page 156.
I don't understand this part:
{opacity:'toggle'}
Can toggle be an opacity value?
$.fn.fadeToggle = function(speed){
return this.animate({opacity:'toggle'},speed);
};
From the documentation:
In addition to numeric values, each
property can take the strings 'show',
'hide', and 'toggle'. These shortcuts
allow for custom hiding and showing
animations that take into account the
display type of the element.
Using toggle will animate the opacity of the element at the speed you specify -- hiding it if it's visible, showing it if it's hidden.
The toggle is a short-cut string that toggles between the show/hide state of the element.
From http://api.jquery.com/animate/
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element.
jQuery doc:
In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element." Source
So yes, it can be a value.
Toggle, toggles between show and hide. From the same book:
In addition to specific values, we can also specify one of the strings hide, show, or
toggle; jQuery will compute the end value as appropriate to the specification of
the string. Using hide for the opacity property, for example, will result in the
opacity of an element being reduced to 0. Using any of these special strings has
the added effect of automatically revealing or removing the element from the display
(like the hide() and show() commands).
Did you notice when we introduced the core animations that there was no
toggling command for the fade effects? That’s easily solved using animate() and
toggle as follows
To help you maybe get around the English problem, here is a page that has a couple of demos right next to the code. Click once and it fades or slides. Click again and it returns to its original state.
If it's opaque it becomes transparent.
If it's transparent it becomes opaque.