CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});
Related
So, right now this is set to be activated on click. I keep trying to mess with the code to get it to just activate immediately and get rid of clicking entirely, but nothing's been working for me.... Pls help.
$(function () {
$(".item").onload(function () {
$(this)
.next().toggleClass("active");
});
$("#body").css("min-height", "100%");
});
write $('item').load(function(){
});
and if that doesnt work make a normal function and put the function on the onload attribute of item element.
Make jquery trigger event for you:
$(function() {
$(".item").click(function() {
$(this).next().toggleClass("active");
}).trigger('click');
$("#body").css("min-height", "100%");
});
I have a link with a script in that opens a view of products. I don't have access to the html, and I need to have this view open on default. Until the behavior is fixed the correct way, which will take long time unfortunaly, I want to automatically make the link click on pageload.
I tried with the script below first - but since the link itself triggers a pageload, this obviously just keeps firing over and over again.
So how do I do this with jquery or vaniall JS, is this even possible?
Script:
$(document).ready(function () {
$('.action')[0].click();
});
My link:
Toon alle
$(document).ready(function () {
$('.action:first').trigger("click");
});
to manually trigger an event u need to use trigger() ,click is to only assign a handler
$(document).ready(function () {
$('a.action').click(function(){
... handler code
});
$('a.action').trigger("click");
});
The click() method triggers the click event.
Syntax :
Trigger the click event for the selected elements:
$(selector).click();
http://www.w3schools.com/jquery/event_click.asp (example)
In your case :
$(document).ready(function() {
$('.action:first').click();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Toon alle
Edit :
If you don't want to trigger in a specific page. do like this.
$(document).ready(function () {
if (!location.href.indexOf("someurl") > -1)
$('.action:first').click();
});
Can you tell me why you add [0], if you need to add it for first element then use following code :-
$(document).ready(function () {
$('.action:first').trigger("click");
});
otherwise you can directly use these :-
$(document).ready(function () {
$('.action').trigger("click");
});
Change your link tag with following :-
Toon alle
I'm trying to make this persistant cart that lets you add products to cart without redirecting to a new page. It works perfectly, but the only problem is that it can not be closed when you click on the exit button in the corner. Live version here by clicking on cart. Make sure to add a product to see it work, else you won't see anything.
I have tried this:
<script type="text/javascript">
$(document).ready(function(){
$('.cart-show').click(function(){
$("#cart").hide();
});
});
</script>
Aswell as cartToggle with is a feature in the Shopify theme Timber.
The class .cart-show is adding to your [X] element later, so you should use event delegation:
$(document).ready(function() {
$('body').on('click', '.cart-show', function (e) {
$("#cart").hide();
});
});
Try this:
$(document).ready(function(){
$(document).on('click', '.cart-show', function (event) {
event.preventDefault();
$("#cart").hide();
});
1.) You should use event delegation,
2.) If you have id for element you should use id as selector
$(document).ready(function() {
$('body').on('click', '#exit', function () {
$("#cart").hide();
});
});
I would like to mimic a click event, so Im using Jquery like this:
$('document').ready(function() {
$('#searchResults a:eq(0)').trigger('click');
});
It doesn't work, meaning nothing happens, Example at JsFiddle
I know I can insert some javascript directly in the link like this onclick="myFunction()" But I would rather not do it like that. I also tried on mouseenter and other stuff but I can't seem to make it click.
This will work
$('document').ready(function() {
$('#searchResults a:eq(0)')[0].click()
});
To just navigate to the page do this:
$('document').ready(function() {
window.location.href = $('#searchResults a:eq(0)').attr('href');
});
http://jsfiddle.net/PVy8r/15/
anchor tags does not have click events, this will work for you:
window.location.href = $('#searchResults a:eq(0)').attr("href");
There is no click function attached to your link that is the reason why its not working
check jsfiddle demo : http://jsfiddle.net/PVy8r/17/
$('document').ready(function() {
window.location.href = $('#searchResults a:eq(1)').attr("href");
return false;
});
I'm trying to change the data-url with jQuery. Currently my code looks like this.
<div id="twitterButton" title="Tweet it on Twitter">Tweet</div>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterButton').click(function () {
$('#tweet').attr("data-url", "https://www.google.com/");
});
});</script>
As you can see I left the url-data blank so I could be sure it is only getting set in the jQuery. However whenever I click the tweet button it always opens the window with the link for the current page that I was on. Can someone explain how I can set it to be something else via jQuery or javascript?
You should use .data() for controlling data attributes. As Daniele states in that answer, you must also stop the event propogation on the a element using preventDefault().
$('#twitterButton').click(function (e) {
$('#tweet').data('url',"https://www.google.com");
e.preventDefault();
});
You must call the preventDefault() method to stop the propagation of the click event on the child a element:
Try this code:
$('#twitterButton').click(function (e) {
$('#tweet').attr("data-url", "https://www.google.com/");
e.preventDefault();
});
Good code
D.