I have an href link in a card div that creates a modal pop-up with all the information I need for a project. i'm currently trying to trigger the click even on that link whenever any part of the div is clicked. This is for a school assignment so I can only use Vanilla JS and JQuery. the card class is the div and the extra class is the link to click.
I've seen 'stop propagation' for these type of events but that's not quite what 'm looking for.
$(".card").click(function(){
$(this).$(".extra").trigger('click');
});
I get an error from the code at .$(".extra") trying to find the instance of the extra class in the specific div.
Please try:
$('.card').click(function(){
$(this).find('.extra').trigger('click');
});
Related
So I have a snippet that I'm using to build some buttons.
<font color=white><button class="button"><span>Register</span></button></font>
<button class="button" onclick="window.location='http://www.google.com';"><span>SP Training</span></button>
<button class="button"><span>Assistance</span></button>
<button class="button"><span>Orders</span></button>
<button class="button"><span>KM Milsuite</span></button>
<button class="button"><span>TMT</span></button>
As you can see I have tried wrapping the whole thing in href, I have tried wrapping the span in href, I have tried wrapping just the font in href, all failed
Ok so I trekked down the java world and tried some on click (numerous variations I have found on this site) none of which work! Every button is a clickable but EVERY button simply links back to the page i'm currently working on. By no means am I an expert at all this but I expected a little give on this!
Any suggestions?
The purpose of a button is to either:
Submit a form (type="submit", the default)
Allow JavaScript to be triggered (type="button")
As you can see I have tried wrapping the whole thing in href
The HTML specification forbids that.
I have tried wrapping the span in href
The span appears to serve no purpose
Every button is a clickable but EVERY button simply links back to the page i'm currently working on
If clicking the button is reloading the current page, then it is probably a submit button inside a form with an action attribute that resolves to the current page (or no action attribute).
If you want a link then use a link and do not use a button.
If you want your link to look like a button, then use CSS to style it that way. Note that the :active pseudo-class is useful for achieving the 3d depressed effect when the link is clicked.
The span tag inside your button is catching the click action. You must take the span out of the "bubbling" chain.
The easiest way is to apply CSS and add the class to your span tags.
span.nonclickable {
pointer-events: none;
}
After that you can catch the button clicks.
A more detailed explanation can be found here: Use CSS to make a span not clickable
It is not quite clear what you want these buttons to do. Use a-tags to link to other pages and use buttons to refer to an action in javascript or a form submit.
You could try this :
<input type="button" onclick="myF()" />
<script>
function myF() {
window.open('http://www.google.com', '_blank', 'resizable=yes');
}
</script>
Hope it helps
I've been trying every single tutorial I found online and none seems to work for me.
I've got these buttons:
<a href='faq.php'><div class='button'>
<div class='button_top'>
</div>
<div class='button_bot'>
FAQ
</div></a>
http://jsfiddle.net/6G8bk/
and I'd like that the top of the button would stay highlighted if the page url is same as href of the button.
Ty for any answers in advance!
Here's the fixed jsfiddle with jquery I tried but still won't work: http://jsfiddle.net/6G8bk/4/
A few things:
In your jQuery, you're trying to select all <a> elements that have a parent class of button, and according to your HTML you do not have (the button class is a child of the <a> element).
The page's URL won't work in JSFiddle because it will get the JSFiddle link, which will be different from the one on your website.
Since you want button_top to be visible on hover, you'll need to use JavaScript. As fas as I know, you can't manipulate another element on hover with pure CSS.
Here is a working Fiddle of what I think you want. I've left comments in the code that might help you.
http://jsfiddle.net/6G8bk/6/
You can retrieve the current url page by using $_SERVER["SCRIPT_NAME"] and comparing it to each element of the menu.
If it match, you put another class in the menu element with CSS rules to have the layout you want.
My question is similar to the one Robert Anderson asked. That was solved beautifully by David Thomas. Here's that JS Fiddle demo.
$('a.button').click(function(e){
e.preventDefault();
$('a.clicked').removeClass('clicked');
$(this).addClass('clicked');
});
But instead of toggling one link color on click, I'd like to toggle three separate colors for three separate link buttons, on each click returning the other links to their default color. Basically exactly what the JS Fiddle does, but toggling three classes rather than one. I'm still a jquery novice and can't make it happen.
More details: these are div links on the page's navbar, so the user isn't navigating to a new page. The idea is that the link button to div1 or div2 will be "lit up" or "colored" on the top nav bar to make clear what section the user is looking at.
http://jsfiddle.net/f36Wq/26/
Simple way - store the click class you want on a data tag on the link and then retrieve it for use.
$('a.button').click(function(e){
e.preventDefault();
$('a').removeClass('clicked clicked2 clicked3');
var $this = $(this), cls = $this.data('clckcls');
$(this).addClass(cls);
});
I'm new to this site.
Javascript is not much, but I found a code to show and hide divs.
This is what I have for now, when clicking on Details1 also shown Details2
jsfiddle.net/qU3TG/3/
How I can do to make the effect only to the current item?
example:
If I have the options Details 1 Details 2, 3 ..... Details DetailsN, clicking on Details # shows only the div that belongs.
The effect Show / Hide, applies to everyone, not just one. I would like to help me with this code or wish I could recommend another code
I have almost one day trying to fix this problem but I couldn't fix it.
Based on your jsFiddle, I've renamed the links inside hidden blocks:
hide
then updated the jQuery code:
jsFiddle
Use this as in your jQuery part:
$('.slidingDiv .hide').click(function(){
$(this).parent().slideToggle();
});
This will cause the parent div which contains the hide anchor to toggle. I hope this is what you needed
I have a tag on a html page on which I am trying to write a jquery function in order to pop open a image link on "hover" which when clicked on, takes me to another web page. I need to set the "navigateURL" property on the link on "hover".
I am fairly new to jquery.
Can somebody please suggest me a good approach for this?
I highly appreciate any help you can offer.
Thanks
$('#tagdiv').hover(function(e)
{
$('#hoverdiv').html('<div><image src="'+$(this).html()+'"/></div>');
});
where 'hoverdiv' is id of any div which is on that page and 'tagdiv' is id of where you want to hover event.
like:
<div id='tagdiv'>image.jpg</div>
<div id='hoverdiv'> </div>