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>
Related
I am trying to play a gif onscroll only when it enters in the viewport either from top or bottom otherwise to show a static image. This is the code I've got so far, but it doesn't show the gif. I am using https://github.com/rubentd/gifplayer and https://github.com/customd/jquery-visible to try to achieve this result.
<!DOCTYPE html>
<html>
<head>
<style>
html,body{
height:100%;
margin:0;
padding:0
}
body:before{
content:"";
width:100%;
height:100%;
display:block;
}
body:after{
content:"";
width:100%;
height:100%;
display:block;
}
</style>
<link rel="stylesheet" href="http://rubentd.com/bower_components/jquery.gifplayer/dist/gifplayer.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://rubentd.com/bower_components/jquery.gifplayer/dist/jquery.gifplayer.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
</head>
<body>
<section>
<h2>Play within view only:</h2>
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</section>
<script>
$('#element').visible( function(){
$('.gifplayer').gifplayer();
});
</script>
</body>
</html>
Your solution doesn't work because this visible function doesn't accept any callback.
This is working example. You had to add scroll event listener and play or stop gif programmatically:
CSS (necessary, gifplayer adds position: absolute):
.gif {
position: relative;
}
HTML (added container, because of above):
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
<div class="gif">
<img id="element" class="gifplayer" src="http://rubentd.com/img/banana.png" />
</div>
JS, working scroll event listener with play or stop logic:
$('.gifplayer');
$('.gifplayer').gifplayer();
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$(gif).data('isPlaying', false);
});
$(window).scroll(function () {
$gifs = $('.gif');
$gifs.each(function (i, gif) {
$gif = $(gif);
if ($gif.visible(true)) {
if (!$gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('play');
$gif.data('isPlaying', true);
}
if ($gif.find('.gp-gif-element').length > 1) {
$gif.find('.gp-gif-element').first().remove();
}
} else {
if ($gif.data('isPlaying')) {
$gif.find('.gifplayer').gifplayer('stop');
$gif.data('isPlaying', false);
}
}
});
});
jquery-visible simply checks if the element is visible at the time .visible() is called. It doesn't alert you or run code when something becomes visible. You could potentially make a scroll event listener that calls .visible() on each scroll and if it returns true you could run your gifplayer code. Or you could use a plugin such as Waypoints, which is designed to run code when something becomes visible.
<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>
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());
I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.
This is my attempt however poor and it is not working.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
obj.filters.alpha.opacity=50;
}
function viewObj(obj1, obj2) {
fadeImg(obj1);
obj2.style.opacity=1;
bj2.filters.alpha.opacity=100;
}
</script>
<div>
<img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>
<div id='txt1' class='image_box_text' >This is image box one</div>
</div>
Thanks in advance.
This should get you started.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
}
function viewObj(obj1, obj2_name) {
var obj2 = document.getElementById(obj2_name);
fadeImg(obj1);
obj2.style.opacity=1;
}
</script>
First, you cannot simply call an object by an id as you did in viewObj. You must do a document.getElementById on its id. Next you will have to check if filters exists (it only does in IE). A better way to do this is to make .faded and .hidden classes in your stylesheet and have the hover event trigger the adding and removal of them.
Here's this code in action: http://jsfiddle.net/WpMGd/
Well, I'm working on a visual form designer and decided to use jQuery UI as both the end form widgetset as well as the widgetset for the designer itself.
My main concern is to make jQuery wigets "read-only". I've had the following idea:
<style type="text/css">
.widget-wrap { position: relative; }
.widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
</style>
<div class="widget-wrap" id="wdt1">
<button class="jquery-widget">Hello World!</button>
<div class="widget-overlay"><!----></div>
</div>
<script type="text/javascript">
$(function() {
$("button.jquery-widget").button();
});
function widgetLock(){
$("#wdt1 .widget-overlay").show();
}
function widgetRelease(){
$("#wdt1 .widget-overlay").hide();
}
</script>
Hope my example makes sense :)
My questions are;
does this sound good to you?
do you know of a better or another way?
do you see any possible issues with it?
I would say this is a very bad idea in that 1) you may find the overlay in a weird place in certain browser resolutions etc and 2) you can still tab to the item.
Much better to either;
Hide the element
Disable the element
Replace text boxes with labels, buttons with graphics etc.
Disable the click on the button
edit
You can use jQuery to unbind events on elements and then you can re-bind them later on.
If I was to build a form designer I'd make all elements divs with an image of the actual widget as a css background image, that way you can drag the widget representation around the form without activating it or having any of the overlay problems.
If you really wanted to make it look like the finished product you can have the actual widget nested inside the div but invisible when the users mouse is within the div, when the user moves the mouse out of the div then set the widget visible again.
DC
Yes I was aware that the background image would look wrong when stretched. So I thought about it on the way home. A better technique would be to create a widget sandwich
place the widget between 2 divs the bottom div controls the size and position the top prevents the widget from activating
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<style type="text/css">
<!--
.widget {
height: 100%;
width: 100%;
}
.widget_overlay {
border: thin solid #FF0000;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
right: 1px;
visibility:visible
}
.sz_controller {
position:absolute;
width:365px;
height:61px;
left: 142px;
top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
elem = document.getElementById(id)
if (elem.style.visibility=='hidden') {
elem.style.visibility='visible';
button.value="Hide Overlay";
} else {
elem.style.visibility = 'hidden';
button.value="Show Overlay";
}
}
</script>
</head>
<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</body>
</html>
The above will work in firefox
Clicking the button hides the overlay div allowing testing of the widget, You can drag the object around the screen, no resizing logic has been implemented.
DC