I have two divs div1 and div2. I want div2 to be automatically hidden but when i click on preview div then div2 to be made visible and div1 to hide. This is the code i tried but no luck :(
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
</script>
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
Make sure to watch your selectors. You appear to have forgotten the # for div2. Additionally, you can toggle the visibility of many elements at once with .toggle():
// Short-form of `document.ready`
$(function(){
$("#div2").hide();
$("#preview").on("click", function(){
$("#div1, #div2").toggle();
});
});
Demo: http://jsfiddle.net/dJg8N/
This is an easier way to do it. Hope this helps...
<script type="text/javascript">
$(document).ready(function () {
$("#preview").toggle(function() {
$("#div1").hide();
$("#div2").show();
}, function() {
$("#div1").show();
$("#div2").hide();
});
});
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
If you want the div to be hidden on load, make the style display:none
Use toggle rather than click function.
Links:
JQuery Tutorials
http://docs.jquery.com/Main_Page
http://www.w3schools.com/jquery/default.asp (W3Schools)
http://thenewboston.org/list.php?cat=32 (Video Tutorials)
http://andreehansson.se/the-basics-of-jquery/ (Basic Tutorial)
JQuery References
http://api.jquery.com/
http://oscarotero.com/jquery/
You are missing # hash character before id selectors, this should work:
$(document).ready(function() {
$("#div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
Learn More about jQuery ID Selectors
The second time you're referring to div2, you're not using the # id selector.
There's no element named div2.
$(document).ready(function() {
$('#div2').hide(0);
$('#preview').on('click', function() {
$('#div1').hide(300, function() { // first hide div1
// then show div2
$('#div2').show(300);
});
});
});
You missed # before div2
Working Sample
At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,
$(document).ready(function() {
$("#abc").hide();
$("#btn").click(function() {
$("#abc").toggle();
});
});
Related
Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
I have added the library for Bootstrap and data-spy attribute where I want to make the div fix when I scroll the page down. But it doesn't work, I have almost tried everything, but not able to figure out the problem.
Is is something like the data-spy attribute doesn't work on class = "row" ?
Here's my code for HTML.
<div class="row">
<h4> HEADING </h4>
<h5>
<div class="row" data-spy="affix" data-offset-top="10">
dsds
Date : <input type="date" name="graph_date" id="graph_date">
</div>
<div class="row">
<div class="graph-hourly">
<div class="loader" id="chart_loader">
<p>Loading...</p>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_hourly"></div>
</div>
</div>
</div>
and some css :
.affix {
top : 0;
width: 80%;
}
after searching for some solutions, I've added this also,
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
but this solution also dosen't worked for me.
Not sure what the problem is in your case. I copied and pasted your code into a jsfiddle with the bootstrap library and the affix class did work. Though, it worked badly because it affixed the row right when you started scrolling.
Looks like Bootstrap doesn't have a way to set the offset to the current position of the element so I added the following javascript to make it work.
$('#affix-this').affix({
offset: {
top: $('#affix-this').offset().top
}
})
(#affix-this should be changed to the id of the row you want to affix.)
Note the $('#affix-this').offset().top. This makes sure the element gets affixed right when you reach the element's current position.
Second, I removed the html attributes that you had for the affixing.
<div class="row">
<h4> HEADING </h4>
<div class="row" id="affix-this">
dsds Date :
<input type="date" name="graph_date" id="graph_date">
</div>
<div class="row">
<div class="graph-hourly">
<div class="loader" id="chart_loader">
<p>Loading...</p>
</div>
<div id="chart_hourly"></div>
</div>
</div>
Notice the affix-this id was added to the row that you want to affix.
Here is a working JSFiddle with these changes so you can see it in action: https://jsfiddle.net/heraldo/6s4u26m3/4/
First of all delete top:0; from affix class because it will make a issue for you.
now you have two methods pick a one :
1
adding data-spy="affix" which is works fine for me
2
same result ass data-spy but you will need some styling after you complete your page
by adding a position Property for input tag
as ex. :
CSS:
sticky{
position:fixed;
}
and HTML :
<input type="date" name="graph_date" class="sticky" id="graph_date">
Update 1
this Jquery code can detect a scroll event so when user scroll down it will make the div tag sticky or "affix"
$(function() {
$(window).scroll(function() {
var aTop = "100";
if ($(this).scrollTop() >= aTop) {
$('#affix-this').css( "position", "fixed" );
$('#affix-this').css( "top", "0" );
$('#affix-this').css( "width", "100%" );
}
});
});
change the aTop variable with the height you want (in pixel) so when the user scroll down 100px the div become sticky
a JSfiddle example
Update 1.1
a bit smarter Jquery code do the same but get the height automatically from a another element this can be good if you format your page to something similar to this
$(function() {
$(window).scroll(function() {
var aTop = $('id').height();
if ($(this).scrollTop() >= aTop) {
$('#affix-this').css( "position", "fixed" );
$('#affix-this').css( "top", "0" );
$('#affix-this').css( "width", "100%" );
}
});
});
Make sure the element to which you're adding data-spy="affix has been created in the DOM before your Bootstrap scripts load. I ran into an issue where I was adding data-spy="affix" in my HTML, but it was wrapped up in a section that wasn't rendering, thanks to data-ng-if. My HTML was created after my Bootstrap had loaded, so the <div> I wanted to stick to the top of the screen never stayed in a fixed position. If you can, use data-ng-show, or something that merely hides HTML, rather than prevents it from being created on page load.
I simply want to swap contents of two divs when pressing a button using AJAX.
I made a simple jsfiddle just to demonstrate what I mean.
So I want to swap A with B and B with A at the same time (while the red and green box stay at the same place) using onclick.
.box1 {
border: 2px solid green ;
}
.box2 {
border: 2px solid red ;
}
<div id="rank1" class="box1">
B
</div>
<div id="rank2" class="box2">
A
</div>
use jquery to do this
include jquery js in html head tag
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
and following script to change the content
<script>
$(document).ready(function(){
$('#sbutton').click(function() {
var div1_value = $( "#rank1" ).html();
var div2_value = $( "#rank2" ).html();
$( "#rank1" ).html(div2_value);
$( "#rank2" ).html(div1_value)
});
});
</script>
add a button in your html body
<input type="button" id="sbutton" value="Change"/>
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)
You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.
To create the menu:
Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
So your entire HTML file should look like:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
Here is a quick example. You set up a container div (which must have position:relative), and menu div (which has positioned:absolute). Use jQuery to hide the menu div when the page loads. When a user clicks on Share, the div will be displayed.
The API code that you get from Facebook will be placed in the div that has the Facebook placeholder text.
To see more about how the menu in your example was implemented, open the page using Chrome. Right click on "Share" and go to "Inspect Element."
<script type="text/javascript">
$(document).ready(function () {
//Initally hide social-menu div
$("#social-menu").hide();
//When social-button is pressed, show social-menu
$("#social-button").click(function () {
$("#social-menu").show();
});
});
<div id="social-button" >Share</div>
<div id="social-container" style="position:relative;">
<div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
<div>Facbook</div>
<div>Google +</div>
</div>
</div>