Jquery Animating Entire div Content - javascript

I need to move the entire div content from bottom to top on load, After 30 seconds onload i need to replace the #content-box to #content-box2
<script type="text/javascript">
$("document").ready(Show_Alert());
function Show_Alert() {
$(function(){
$("#content-box").animate({'bottom': 1900},700);
});
}
</script>
<div id = "content-box">
qwerty
</div>
<div id = "content-box2">
1234567890
</div>

Use this script:
$(document).ready(function(){
setTimeout('Show_Alert()', 30000);
});
function Show_Alert() {
$("#content-box2").animate({'bottom': '1900px'},2000);
}
And this CSS:
#content-box2 { position: absolute; bottom:0; left:0; width: 100%; }
If it doesn't help you could you please provide us the CSS for the content boxes and tell us what exactly should be happening after 30sec?

to replace as you said in comment .. -in your case- you can use .html()
$('#content-box').html($('#content-box2').html());
or you can use .text()
$('#content-box').text($('#content-box2').text());

Related

Toggling HTML visibility using CSS and jQuery

Ok so I have a div that contains a canvas and a span which contains an image. I want it such that if the user hovers over or focuses on the div that the image inside of the span will appear. The image wil be invisible otherwise.
Long story short I want to have a canvas with a red 'X' on the corner that is only visible when the canvas is active
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
The hover event fires just fine but the image refuses to toggle visibility. Any help?
When you use a class within your selector, write it like this:
$('.myDiv')
When you use an ID within your selector, write it like this:
$('#myDiv')
For further informations, check out jQuery's learning center website.
Seems like you have misspelled or have not specified the jQuery selector type (class . or id #). Please try this:
$('#imageCanvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
See here .
$("#control").mouseover(function(){
$('#img').show();
});
$("#control").mouseout(function(){
$('#img').hide();
});
#img{
display:none;
}
#control{
margin-bottom:10px;
padding:5px;
background-color:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='control'>Show/Hide</div>
<img src='https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg' id='img'>
The question is not well-phrased, so I ain't sure I totally understood what you wanted.
When you try to select by class, don't forget the dot '.'
$('image-canvas').hover(function () {
$('.delete-image').addClass('active');
}, function () {
$('.delete-image').removeClass('active');
})
When using functions 'addClass', 'removeClass', 'toggleClass', etc. - you don't use the '.' sign because it is a function that refers only to classes. On the other hand, when using jQuery selector $(' ') or vanilla querySelector(' '), you should declare what kind of attribute you are selecting by, those will be '#' for ID, '.' for Class, and if you want to select by anything else you can use $('*[anyattribute=anyvalue]'), in your clase it could be $('span[class=delete-image]').
Good luck

hide body tag but still show a div

<script>
$(document).ready(function(){
$("#print").click(function(){
$("body").hide();
$("p").show();
window.print();
$("body").show();
});
});
</script>
</head>
<body>
<p>THIS SHOULD BE PRINTED </p>
<button >Hide</button>
<button >Show</button>
<button id="print">print</button>
</body>
given is a sample code. Clicking on print button should hide body of page except the values inside "p" tags. need help as to how to achieve this ?
is there some way of making "p" tag or "div" tag act as body temporarily ?
Use below given function to first hide all child of body tag and then show the required child
$("body").find("*").hide();
I would structure your application differently as you can't show something contained within the element you have hidden.
<body>
<div id="hide-me"></div>
<p id="show-me">THIS SHOULD BE PRINTED</p>
</body>
and change your logic to something like this...
$(document).ready(function(){
$("#print").click(function(){
$("#hide-me").hide();
$("#show-me").show();
window.print();
$("#hide-me").show();
});
});
It can be risky to hide everything in the page. Also, the approach makes you ahve to add the content after hiding the body.
A better approach is to make the content you want come to the front, fill up the whole screen, and hide everything else behind it without deleting.
And it's very simply to do so.
$(function() {
$('.show-print').on('click', function() {
$('.print-container').addClass('active-print');
});
});
.print-container {
position: fixed;
background: white;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.print-container:not(.active-print) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Normal body content
</p>
<button class="show-print">Print</button>
<div class="print-container">
<div class="print-content">
I'm Print. I'm stronger than BODY!
</div>
</div>

Why is my jQuery toggle not working?

I'm trying to set up a side menu and having some trouble with the jQuery Toggle. Everything else seems to function fine. I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). Any suggestions?
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. Any help would be greatly appreciated.
The side menu:
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
Image I click to open the menu:
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page:
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery:
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
You need to wrap the jQuery in this block (docs):
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code:
http://codepen.io/anon/pen/xEaqqA
There is a possibility that jQuery not loaded on page at the time.
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
Thanks for your help everyone! Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. Adding this to the top was my solution:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
Your CSS could look like this:
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
And your jQuery script:
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}

Internal link without id in url

If we need to jump to top section then we can simple write a code
link to top
or just javascript code
location.href=#top
Result : It takes us to top page with url :http://fiddle.jshell.net/_display/#top.
But what my problem is, I dont' want to show /#top query on url string but i want my page to that top section . Reason why i don't want to show that string in url is, my page get stuck if browser don't find 'id' named top .Context or information which i'm displaying is inside a dialog box so that once the dialog box is closed there isn't any id named top then when user tries to refresh that page i.e http://fiddle.jshell.net/_display/#top , page gets stuck .
Can anyone give a better solution for this problem?
You have few options...
You can use pure Javscript:
window.scrollTo(X, Y); (obvisourly X and Y are the scroll coordinates, and top will be 0,0).
Another option (yet non-jQuery based) can be:
document.body.scrollTop = document.documentElement.scrollTop = 0;
If you prefer jQuery based solution, try the following:
$(document).scrollTop(0);
Or, as well:
$(window).scrollTop(0);
Use the option that better suit your need.
Enjoy coding.
Try
$(".link").on("click", function(e) {
$("body").animate({scrollTop: $(".link").not(this).offset().top}, 500);
return false
})
#top, #bottom {
height:400px;
width:100%;
display:block;
}
div:nth-of-type(1) {
background:blue;
}
div:nth-of-type(2) {
background:orange;
}
span {
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="top">top <span class="link">go to bottom</span></div>
<div id="bottom">bottom <span class="link">go to top</span></div>
Demo Here
Html
<div id="div1" style="height: 1000px; width 100px">
Test
</div>
<br/>
<div id="div2" style="height: 1000px; width 100px">
Test 2
</div>
<button id="click">Click me</button>
Jquery
$(document).ready(function (){
$("#click").click(function (){
//$(this).animate(function(){
$('html, body').animate({
scrollTop: $("#div1").offset().top
}, 2000);
//});
});
});

How to prevent html text appearing before Javascript code executes

Say my html is this
<div class='screen'>
<p>*A lot of text here*</p>
</div>
<div class='screen'>
<p>*More text and some images here*</p>
</div>
<div class='screen'>
<p>*Even more text and an image here*</p>
</div>
and right below my html, I have this
<style>
.screens {
margin: 10px;
}
</style>
<script type='text/javascript'>
hide();
</script>
Now, the Javascript function hide is in an external JS file which I imported in the html file. This is the hide function.
function hide() {
$('.screen').hide();
}
Now, when I open up this page, sometimes it works (it hides the text right away so it is a blank page) and other times, the text shows for like one second and then the text becomes hidden. How come it doesn't hide the text right away 100% of the time? would it work 100% of the time if I do
<script type='text/javascript'>
$(document).ready(function() {
hide();
});
</script>
?
Create a wrapper div and give it a display:none;. When needed, display it with show()
CSS:
.wrapper{ display:none;}
HTML:
<div class="wrapper>YOUR CONTENT</div>
Javascript
$(document).ready(function(){
$(".wrapper").show();
});
Or if you just care about .screen, change its CSS to display:none and the javascript to show() instead of hide()
<style>
.screens {
margin: 10px;
display:none;
}
</style>
<script type='text/javascript'>
show();
function show() {
$('.screen').show();
}
</script>

Categories