I'm trying to write a script where I programmatically click a tab, which reveals more divs on the website, and then perform some actions on those revealed divs.
Right now, I have
document.getElementById("buttonid").click(); // which reveals another section of the webpage
console.log($("#idofnewdiv"));
...but it doesn't seem to see the new div. However, when I manually click on the button, console.log is able to properly print it out. Am I doing something wrong?
var button = document.getElementById("buttonid");
button.addEventListener("click", function(){
alert("Button is Clicked");
});
button.click();
too you can use it like this:
var mButton = document.getElementById("buttonId");
mButton.onClick(function(){
your code to execute here.
});
It doesn't look like your click function is doing anything. The following code assumes that all of the <div>s are already hidden.
var listOfDivsToReveal = document.getElementsByClassName("divsToReveal");
var listOfDivsIter = 0;
$("#thebuttonID").click(function(){
if(listOfDivsIter > listOfDivsToReveal.length){
//do whatever you do when all of your <div> tags are revealed
}
listOfDivsToReveal[listOfDivsIter++].style.display = "inline";//Or your desired display.
});
Related
I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"
Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.
I have an input field(search_text), which shows the images (id="demo2") from a database when the user puts in more than 1 letter.
And then I have a draw function (draw()) that is supposed to do something when the image is being clicked, (after it got displayed from the database).
The problem is the image (id="demo2") does not exist in the Html DOM, only after the user has put in more than 1 letter.
Now, I have:
function myFunction(){
console.log('success');
alert("I am an alert box!");
console.log('success2');
var x = document.getElementById("demo2");
console.log(x);
x.addEventListener("click", myFunct);
console.log(x);
}
function myFunct(){
currentImg=document.getElementById("demo2");
draw();
}
function myFunction2(){
//alert("I am an alert box!");
var x = document.getElementById("search_text").value;
if (x.length >2){myFunction();}
}
which works when I slowley type in the searchterm and the alertbox comes and after that, when I click the image, the draw() function works.
When I take out the alert it won't work. Somehow the alert lets the user wait until the image is loaded/created. How do I achieve this without the alert?
Thanks!
You can use the jQuery function $.on() to bind an action to a not yet created element. You just specify it to be on an alement that exists when the code is running, such as the body element.
See the fiddle below. The HEY button wont appear until after 3 seconds, but since we bind the click event to it as described above, we wont have any problem.
//This is how you bind to a dynamically created element
$('body').on('click', '.myclass', myFunction);
setTimeout(function() {
var button = document.createElement('button');
button.className = "myclass";
button.appendChild(document.createTextNode("HEY"));
$('#button-cell').append(button);
}, 3000);
function myFunction() {
alert("It's working!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="button-cell"></td>
</tr>
</table>
Even though this works, I'd suggest you might look into adding your elements directly and then toggling their visibility.
use setTimeout to make it run in a separate thread which would be what alert does otherwise:
function myFunction2(){
setTimeout(function(){
var x = document.getElementById("search_text").value;
if (x.length >2){
myFunction();
}
},100)//keep minimal time.
}
Suggestion:
Why don't you add element to DOM toggle the display of an element instead of creating it after typing 2 chars?
I'm new to jQuery and am trying to make a menu for a catering business and figured using jQuery would be the easiest way to implement what I am trying to do.
There is a catering menu and a dessert menu, I want to have them both hidden when the page loads but when a button, either catering or dessert, is clicked, show the appropriate menu. i can get it to hide them, but not sure how to get them show show on the button press.
Thanks!
var $cateringMenu = $("#cateringMenu");
var $cateringButton = $("#cateringButton");
var $dessertButton = $("#dessertButton");
var $dessertMenu = $("#dessertMenu");
function hideMenu(){
$cateringMenu.hide();
}
function showCateringMenu(){
if($cateringButton.click() ){
$cateringMenu.show();
}
}
hideMenu();
showCateringMenu();
Check out the documentation for the jQuery click method here: https://api.jquery.com/click/
This method will set up an event handler for the particular element. You can use it like this:
$cateringButton.click(function() {
$cateringMenu.show();
});
That will only cover half of the situations (when the menu is hidden). You'll have to add some additional logic that checks if the menu is hidden or shown and acts accordingly (or might want to check out the toggle method here: http://api.jquery.com/toggle/), but hopefully this is enough for you to continue!
Try it this way:
$(document).ready(function(){
$("#cateringMenu").hide();
$("#cateringButton").click(function(){
$("#cateringMenu").show();
});
});
The toggle() jQuery method was designed for exactly this:
jQuery:
<script>
$(document).ready(function(){
$("h1").click(function(){
$("p").toggle();
});
});
</script>
HTML:
<h1>Desert menu</h1>
<p>lots of deserts</p>
The documentation here explains its use pretty well. It takes care of the visibility checking you would otherwise have to do.
I need to make a div so that when the cursor hovers over it then I can detect it (using javascript) but I want to make it so that you can click through the div to the elements underneath. Is there a way to do this?
Thanks
Edit
As far as I'm aware, and through my quick searches, I do not believe that you are able to do this, if you can it wouldn't be easy and or very practical I wouldn't think.
old
Using jQuery:
$(document).ready(function(){
$("body").on("hover", "div", function(){
//do whatever you want on hover
});
$("body").on("click", "div .child-class", function(){
//do whatever on click
});
});
If this doesn't answer your question and do what you want, let me know what more specifically why it doesn't.
There are multiple solutions for this depending on your problem.
I will start with some assumptions:
1. You are the owner of the page (you know what happens there);
2. You know what element is beneath the clicked element.
For this case check this code:
//function executed when you click on element with id: beneath
function clickOnBeneath() {
alert("beneath click");
}
//function executed when you click on element with id: above
function clickOnAbove() {
var beneathEl;
beneathEl = document.getElementById("beneath");
beneathEl.click();
}
//attach click event on element with id: above and beneath
function attachClickOnElements() {
var aboveEl,
beneathEl;
aboveEl = document.getElementById("above");
aboveEl.addEventListener("click", clickOnAbove, false);
beneathEl = document.getElementById("beneath");
beneathEl.addEventListener("click", clickOnBeneath, false);
}
attachClickOnElements();
and also working example: http://jsfiddle.net/darkyndy/xRupb/
If you don't know what element is beneath it then I will try to find some code as I wrote a couple of years back something like this, as start point you can check getClientRects() function that is available on HTML elements (documentation: https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects )
Example: http://vincent-massaro.com/map/
Currently, the script allows you to click on a piece of the accordion to open it, but it is set to close on mouseleave. When I set the mouseleave to .click, it gets confused and doesn't know what state it is in. I want to make it so that you can click to open it, and click to close it, instead of mouseleave. The code controlling this is below, and the full script is in haccordion.js linked in the page source. If someone could help me modify this script, I would be very grateful! Thanks in advance.
$target.click(function(){
haccordion.expandli(config.accordionid, this)
config.$lastexpanded=$(this)
})
if (config.collapsecurrent){ //if previous content should be contracted when expanding current
$target.mouseleave(function(){
$(this).stop().animate({width:config.paneldimensions.peekw}, config.speed)
})
}
try use this
$('.accordion-item-header').click(function() {
var item = $(this).parent().find('.accordion-item-body');
item.toggleClass('open').animate({
width:item.hasClass('open') ? 0: 100
}, 100).toggleClass('open');
});
You could set a boolean variable to represent whether the accordion is open or not and just check it on click. (You'll need to toggle the variable's state on click too)
Edit:
Ok try this. Set a boolean global variable (outside the click event) like this:
var accordion_expanded = false;
Then within your click event do something like this: (I haven't tested this so you might have to massage it a bit to fit your circumstance)
In the function where you expand your accordion put this:
accordion_expanded = true;
And in the function where you contract your accordion do a
if(accordion_expanded == true){
//Contract accordion code goes here
accordion_expanded == false;
}
Good Luck!