Hope you well,
I'm trying to make something like this,
firstly, it'll show this
and after, clicking this "menu" image, It'll show something like this
So, I've made some container using <div> here:
<body>
//this is my menu container..
<div class="menu_pos_jquery">
<a class="btn1" href="#"><img src="logo/menu_logo.png" style="height: 70px; margin-left: 850px; margin-top: 15px;" onmousedown="return false;" alt="Menu" /></a>
</div>
//here is my another container which i would like to open using Jquery after click menu container..
<div class="menu_pos_jquery2">
</div>
</body>
So i did tried using this code:
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeIn();
});
});
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeOut;
});
});
</script>
But it's not working, When i run this program, but it shows full page like what i provide you a second pic .. And i want to show only first menu and after click menu it must suppose to show my another container, how to do it? pls, help.. and sorry for my bad English!! .. hope you understand my question.
You should change your code into this:
$(document).ready(function(){
$(".menu_pos_jquery2").fadeOut();
$(".btn1").click(function(){
$(".menu_pos_jquery2").fadeToggle("slow");
});
});
Maybe you want this
$(document).ready(function(){
$(".btn1").click(function(){
$(".menu_pos_jquery").fadeOut("normal",function(){
$(".menu_pos_jquery2").fadeIn();
});
});
});
You have registered two click event handlers to the same element, so when ever you click the button, both will be called. But only one should be called at a time.
Adding and removing a class to the .btn element would be a good option, as you can also specify CSS w.r.t the state. Please consider the following
$(document).ready(function(){
$(".btn1").click(function(){
var isMenuOpen = $(this).hasClass("open");
if(isMenuOpen){
//if already open, close it
$(this).removeClass("open");
$(".menu_pos_jquery2").fadeOut();
}else {
//if not open, open it now
$(this).addClass("open");
$(".menu_pos_jquery2").fadeIn();
}
});
});
Related
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>
I have two html pages in my web app, index.html and topics.html. i have a button in topics.html that when clicked, is supposed to make visible a hidden a Div in index.html so that when I navigate to index.html, the Div must be visible. I understand this can be achieved by local storage and windows.onload, how can I incorporate it to my code which looks like this
topics.html
<button id="show">Show</button>
and the JS
$(document).ready(function(){
$("#show").click(function(){
$(".me").show();
});
});
On clicking the #show button, I want the Div below which is currently hidden to become visible like this so that when i navigate to index.html, the div is visible, and when i click the #hide button, it should stay hiddedn even when page reloads
Index.html (edited)
<div id="rss-feeds" class="me"></div>
<button id="hide">hide</button>
js
$(document).ready(function(){
$("#hide").click(function(){
$(".me").hide();
});
});
How can i use local storage for this?
it's easy if you name your function:
$(document).ready(function(){
function showIt(){
localStorage.shown=1;
$(".me").show();
}
if(localStorage.shown==='1'){ showIt(); }
$("#show").click(showIt);
});
that way you can call the same routine from the click event and during bootup from localStorage.
I managed to do it this way using this wonderful example and it works beautifully for anyone who might be interested.
https://gist.github.com/jakebresnehan/1983968
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
<div id="sign-up-form">
<p>Sign up form</p>
</div>
$(document).ready(function($){
if (Modernizr.localstorage) {
$('#hide-button').click(function(e){
localStorage.setItem('subscribed',true);
$('#sign-up-form,#hide-button').hide();
$('#hide-button').hide();
$('#show-button').show();
});
$('#show-button').click(function(e){
localStorage.setItem('subscribed',true);
localStorage.clear();
$('#sign-up-form,#hide-button').show();
$('#show-button').hide();
});
var is_subscribed = localStorage.getItem('subscribed');
if(is_subscribed){
console.log('localStorage')
$('#sign-up-form,#hide-button').hide();
}
if(!is_subscribed){
console.log('no localStorage');
$('#sign-up-form').show();
$('#show-button').hide();
}
}
});
I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.
I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo
In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)
$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});
We can use an iframe to display the link in the <a> tag.
Here's a fiddle
Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});
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' });