How do I specify a second condition that requires that the user not only click a link but click in the area between a div in order to go to landing.html?
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$("#postos").click(function() {
$("#linkos").attr('href', 'landing.html');
});
$('#clickdiv div').click(function () {
$("#linkos").attr('href', 'landing.html');
});
});
</script>
<a id="postos" href="#"></a>
<div id="clickdiv">please click</div>
<a id="linkos" href='javascript:window.alert("click the link and div");'><br/><img src="pic.png"></a>
I STRONGLY suggest you go about this differently. Using divs in this manner SCREAMS poor design; not to mention, forcing users to click multiple elements feels clunky and tedious.
However, I have provided you an example of how to do so: http://jsfiddle.net/2q3SQ/27/.
I have also provided you with another example that might be more useful:
http://jsfiddle.net/2q3SQ/28/
Links (MAY BE USEFUL):
http://code.google.com/edu/submissions/html-css-javascript/
Related
I am using a bit of jquery to hide some content on my webpage until a button is clicked. The jquery is hiding my content just fine but no matter how many times I click the button, it wont show back up again and I cant figure out what I have done wrong! Here is my code:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
Instead of show() use toggle() method. Please check the code below:
$(document).ready(function() {
$("#hidden-samples").hide();
$('.access-content').click(function() {
$('#hidden-samples').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hidden-samples">Samples</div>
<a class="access-content">Show Samples</a>
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
Trying to change the class of an item with jQuery, but I can't seem to make it work. For some reason, nothing at all is happening.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#theSpinner").click(function() {
$("#theSpinner").toggleClass("spinning");
});
</script>
<a href="#" id="reload">
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
</a>
I've tried with:
$("#theSpinner").click(function() {
$("#theSpinner").removeClass("notspinning");
$("#theSpinner").addClass("spinning");
});
aswell as $("#reload") instead of $("#theSpinner"), and with an onClick="" to a javascript function containing the addClass / removeClass part.
I really don't know what's the problem, but any way around this bull would make me very happy.
Try wrapping your jQuery code within a "document-ready" block to ensure that jQuery has been loaded prior to calling your function :
<script>
// Example of a document ready function
$(function(){
// When jQuery has loaded, wire up this function
$("#theSpinner").click(function() {
$(this).toggleClass("spinning");
});
});
</script>
Example
You can see a working example of this in action here and demonstrated below :
Here you go
<img src="spinbut.png" style="width:100px;height:100px;" id="theSpinner" class="notspinning">
<script type="text/javascript">
$("#theSpinner").click(function() {
$(this).toggleClass("notspinning spinning");
});
</script>
I have this code, when user clicks on Show Comments, div with comments appears. Problem is that Show Comments stays diplayed after you click on it.
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container' style='display: none;'>
comment 1: ...
comment 2: ...
</div>
<a class='show-comments'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
How to make in javascript that element disappear after you click on link? Something like this:
<a class='show-comments' style='display: none;'>Show Comments</a>
Or even better, how to make that Show Comments change to Hide Comments and when you click on Hide Comments, comments are hidden (div with comments is set again to dispay: none), and Show Comments appears again.
Maybe that could be created easier with two elements:
<a class='show-comments'>Show Comments</a>
<a class='hide-comments' style='display: none;'>Hide Comments</a>
that changes to
<a class='show-comments' style='display: none;'>Show Comments</a>
<a class='hide-comments'>Hide Comments</a>
If there is a better way to do this with other language than javascript, please feel free to write it.
You should wrap the jQuery in the .ready function like this:
$(document).ready(function() {
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
});
This should work.
To answer the rest of your question:
You can use the same element as link for both actions.
$(document).ready(function() {
$(".show-comments").on('click', function(){
$(this).removeClass().html('Hide Comments').addClass('hide-comments');
$(".comments-container").slideDown("slow");
});
$(".hide-comments").on('click', function(){
$(this).removeClass().html('Show Comments').addClass('show-comments');
$(".comments-container").slideUp("slow");
});
});
Note: I use the .on() method to attach the event handlers to the elements in the jQuery object.
I know this is a old post but I just found something really simple to do.
<a class='show-comments' onClick="$(this).hide()">Show Comments</a>
Hope it help someone like me who was trying to find about it.
Something like this:
$(document).ready(function() {
$(".show-comments").click(function(){
var oThisLink = jQuery(this);
oThisLink.toggleClass('someclassname');
if( oThisLink.hasClass('someclassname') ) {
oThisLink.text('Hide Comments');
jQuery(".comments-container").slideDown("slow");
}
else {
oThisLink.text('Show Comments');
jQuery(".comments-container").slideUp("slow");
}
});
});
I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({})
})
</script>
Div1
<div id="div1" style="display:none;">
Load the other div
</div>
<div id="div2" style="display:none;">
<p>Other div</p>
</div>
I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.
I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:
<script type="text/javascript">
function find_hidden(){
$('.infinite')
.unbind('click')
.bind('click', function() {
var glink = $(this).attr('href');
jQuery.facebox({div: glink});
find_hidden();
});
}
</script>
I found the answer here.
From skimming through the source, I think you can just pass a string, like this:
$.facebox('<div>test</div>');
Try this:
jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });