I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.
For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.
<div id="firstDiv" style="width:100px; height:100px">bla bla</div>
How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?
just to disable click event to a div don't place extra div over it just use on() and off() from jQuery
Details : ON ,OFF
Still if you want to place a div over another try using css positioning and z-index
A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.
The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.
You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.
One more way is to use the jQuery BlockUI plugin.
I personally like using something like this
pointer-events:none;
Disable's click events
Related
I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>
I have a reasonably complex list of Dynamic Div classes which contain various nexted divs to display shop content - the whole thing needs to have a hover state and be clickable (it currently has hover styles applied) and accessible.
I figure I can either approach this by -
1 - Make the containing Div into an Anchor link and style accordingly
2 - Nest an anchor tag within the div class and write a JS function to trigger a click on the anchor when the containing div is clicked.
Whats the thoughts on which is the correct approach?
I would definitely go with the wrapping <a> in that case you don't have to think about setting tabIndex=0, role=link and also you can skip adding the extra JavaScript to make the button clickable and binding the enter key for the same action as well.
Or if the "link" is not taking the user to another location and just show a modal window or some other fancy function you should wrap the <div> with a <button> in that case you can also skip binding the spacebar to the action too, as it is inherited. (But if you really can't do that you should add role=button to the wrapping <a>)
Now you can focus on styling and remember to use both :hover and :focus
It's fine to make the <div> clickable by adding an "onclick" handler. However, you should specify an ARIA "role" attribute (such as role="button" or role="link") as well as specify the "tabindex" attribute (tabindex="0") to make it possible to bring the element into focus when using the tab button on the keyboard.
My store's collection pages have the quick-view feature where hovering over products images allow you to click 'Quick View' to open a modal dialog window with summary info about the products. This is done with the leanModal plugin.
See: http://froy.com/collections/beds-mattresses for example. Store is powered by Shopify.
The problem is, when the page initially loads, all the elements within the modal are loaded despite being hidden. This unnecessarily slows down the site. I'd like to load the contents within the modal only after the user clicks on 'Quick View.'
<div class="quick_shop"> <!--This is the modal trigger-->
<div class="quickview-text">Quick View</div>
</div>
<div class="modal">
<!--All contents of the modal dialog window go in this div-->
</div>
Script:
$('.quick_shop').leanModal(); //Calls the function on the modal trigger
(function($){$.fn.extend({leanModal:function(_1)...});})(jQuery);
//The above line of code is for leanModal. I didn't paste entire thing cause it's long
Any help would be much appreciated! I'm new and learning so this is all very exciting.
The purpose of the modal div is to have a precise view on one specific element.
In your case (on the webpage you provided), the modal is loaded for each element, which breaks the sense of what you're trying to achieve.
I've never used the leanModal plugin but I guess you could try doing the following:
When the "Quick view" is pressed, find the closest element with jQuery .closest() method by searching the element with class .quick_shop, THEN leanModal that single element and display it:
$(".quickview-text").on("click", function(e){ $(this).closest(".quick_shop").leanModal(); //Then display it with .show() if it's hidden by default });
Once the modal is closed you can delete the element instead of hiding it with the jQuery's remove() method.
I have a svg area in the middle of the screen, where I move some SVG elements around, by using D3 drag behavior. Below the svg, I have some options, in a div like this:
<div id="gui-options">
<div onclick="sortCards()">
<span>Sort cards</span>
</div>
...
</div>
When I have dragged some elements around in the svg, I have to click twice to trigger sortCards(). The first click is not registered. The implementation of sortCards() is not important to this problem.
I have tried to add click handlers after the DOM is ready, but that doesn't make any difference.
I don't have this problem when the drag-functionality is disabled. If I click twice on an option, I only have to click once to toggle the other options. But if I drag some elements two clicks is necessary to "change focus".
Do you have any suggestions where the solution might be hiding?
I have a series of input buttons. Let's say two for simplicity. Each button has its own associated content in a separate div. All the content is in invisible divs ( display: none ) to begin.
If you click a button, its associated content is displayed. If you click it again, the content disappears. This is done with toggle(). The problem is that if you click one button and then click the other button, both divs are now visible.
So my main question is the best way to solve this problem. The solution I tried doesn't work, so if you have an entirely new approach, please let me know, or if you can refine my approach to make it work, that'd be great too. Okay, on to how I tried to solve this.
To solve this, I used siblings() to make sure all content divs are invisible before a new content divs appears.
So now, if I click 1 it appears. If I click 2, 1 disappears and 2 appears..... but now, if I click 1 again nothing happens (because it's my second click on number 1, and toggle() keeps track of each button separately)
How can I implement this type of content toggling without running into these issues?
(On the real page there are an unknown number of button / div combos and the user can click on them in any order)
Here's an example of the problem code (click 1, 2, then 1)
Thanks!
Looks like the answer may be something using .trigger('click') and :visible... just having trouble making it work.....
try this: http://jsfiddle.net/TennG/
To achieve your desired results, keep the state separate for each div (by using classes to represent hidden and visible, and don't use the toggle function.
$("input").click(
function(event) {
var theDiv = $("#d" + $(event.target).attr('id'));
var wasHidden = theDiv.hasClass("hiddenDiv");
$(".visibleDiv").removeClass("visibleDiv").addClass("hiddenDiv");
if(wasHidden){
theDiv.removeClass("hiddenDiv").addClass("visibleDiv");
}
}
)
div div.hiddenDiv {
display: none;
}
div div.visibleDiv {
display: inline:
}
<input id="i1" type="button" value="one" />
<input id="i2" type="button" value="two" />
<div>
<div id="di1" class="hiddenDiv ">This is the first one.</div>
<div id="di2" class="hiddenDiv ">And here we have number two.</div>
</div>
The technique can be summed up as follows
Start off with all divs hidden
When a click occurs, look at the relevant div, to see if it was hidden
Remove the visible class from all divs that have it, and replace with the hidden class
If the div was previously hidden, remoe the hidden class and replace with the visible class.