Using the following code, how can I keep the div open and not hidden once the mouse roll off the trigger, until another trigger is rolled over?
I am using this code on http://griffithsandpartners.com.gridhosted.co.uk/services-3/ the Customer wants a rollover action on the services button, but as they have a lot of text with some of them, you can't scroll down to view it without coming off the trigger, and then it's hidden.
They don't want a click to open.
Really appreciate your help here.
One way would be is that you remove the onmouseout of all pop-up-triggers and you set a onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none'; to the div with the class="postcontent clearfix"
like so:
<div class="postcontent clearfix" onmouseout=document.getElementById('ALL-THE-POP-UP-BOX').style.display = 'none';>
So when the mouse leaves the pop-up-triggers it wont hide the pop-up-box but if the mouse leaves the postcontent clearfix div it will hide all displayed pop-up-box.
Note: you have to hide all pop-up-box on pop-up-trigger mouseover so that only the current pop-up-box will be displayed.
Hope this helps.
Related
When I am placing the jQuery selectmenu inside a div that has a CSS property overflow: scroll and is smaller then its content, then the dropdown menu is not following the scrolling inside the overflown div.
See the example here
https://codepen.io/Nighel123/pen/gZeQVd?editors=1000
I have found a way to fix it with this code:
$(".demo").scroll(function(){
$( "#salutation" ).selectmenu( "open" );
});
But I think this is not the best way to fix the problem since the dropdown does not seem to follow the select element precisely when I am trying the code on my computer. Additionally the dropdown menu opens when I am scrolling inside the overflown div, what is also not the expected behavior of a dropdown.
I also tried to trigger the scroll event of the window object, when the overflown div gets scrolled to fire the positioning methods of the jQuery dropdown menu. But this did not work at all.
I would like to follow the dropdown menu follow my select item more precisely with the scrolling of the overflown div. And maybe also get some less ugly hack compared to what I did above.
I found a solution with the appendTo method of the jQuery-UI selectmenu. Just append the dropdown menu to the div that is being scrolled and it works!
I have a situation where a toolbar item in CKEditor5 opens a ContextualBalloon which contains an iframe.
In my current understanding, the only way to hide the balloon is to remove the iframe view i.e.
this.balloon.remove(this.colorPickerIframeView)
However this removes the iframe view from the DOM, meaning that the next time I open the balloon view the iframe is reloaded.
I'd rather not have to reload the iframe every time, is there any way around that?
If you want to only hide the ContextualBalloon's view you can try to use this.balloon.view.hide()
I need to implement a sought of onRendered() event that would ensure all of the grid is rendered before I do something, which is to .hide() it. My gaol is to have a .hide() and .show() button attached to the div the grid resides in, with the default status set at hidden. The problem is that at the point in which my script executes the initial .hide(), the grid is not fully created yet by the grid.js script. I would rather not do any delay loop. Much rather have a callback.
Any help would be appreciated
Thanks
Pat
This should work without a callback. I have a SlickGrid app where I show and hide the grid in response to UI events. The grid exists as soon as it is instantiated (with new Slick.Grid) and can be manipulated with the .hide()and .show() methods.
I did find one catch though...
If you create the div tag with display: none (so it is initially hidden) the grid columns do not initialise properly. To workaround this I create the div tag with visibility: hidden and remove this style before using the .hide()and .show() methods.
My code looks roughly like this:
<div id="mygrid" style="visibility: hidden"></div>
$grid = $("#mygrid")
grid = new Slick.Grid($grid, gridData, gridColumns, gridOptions);
// Hide grid by default, remembering to remove the visibility style
$grid.hide();
$grid.css("visibility", "visible");
// You can now show and hide the grid using normal jQuery methods
$grid.show();
$grid.hide();
Hope this helps.
The slick grid has implemented an event onRendered event github source. We can subscribe to this event and make the appropriate use of it.
I load a div using ajax:
$("#contentdiv").load('MyPage.php');
This is a "modal" div that shows details related to a picture the user clicks on.
The clickable pictures form a long list down my page.
I would like to have this modal div appearing on the position (have the same top value so to speak!!) of the picture that was clicked. Therefore the use does not need to scroll back to his/her picture of interest when the information div is hidden (closed!)
Any help is very much appreciated.
Thank you,
Carly
If you use the Modal dialog available in the JQueryUI package it should automatically do this for you.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});