I display a popup window in a simple format. I want to apply different format of opening popup a window. How can I apply format or style so that it looks very good when pop window opens? The following is my source code:
<div onMouseOver="show('healing')" onMouseOut="hide('healing')">
<div id="healing" class="bgdiv" >
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" >Welcome Sir.</div>
</div>
</div>
javascript code
<script language="JavaScript">
function show(id)
{
document.getElementById(id).style.visibility = "visible";
}
</script>
You should take a look at JQuery (http://jquery.com/). JQuery is a Javascript framework and you can use effects for displaying elements like fade, slide, show/hide.
All you have to do is change your code a little bit (Jquery solution):
<div id="showhealing">
<div id="healing" class="bgdiv">
<div id ="title" class="Title" >Healing</div>
<img class="img" src="images/healing.bmp">
<div class="description" > Welcome Sir.</div>
</div>
</div>
<script>
$('#showhealing').hover(
function() { $('#healing').show(500) }, function() { $('#healing').hide(500) }
);
</script>
When you use JQuery UI, too (it's a extension for JQuery) you have much more effects. (Take a look here: http://jqueryui.com/demos/effect/).
To use the Effects of JQuery UI you need to update your script like this:
<script>
$('#showhealing').hover(
function() { $('#healing').show("explode", {}, 500); }, function() { $('#healing').hide("explode", {}, 500) }
);;
</script>
Related
I got the following javascript code:
function myProfileIn() {
var showme = document.getElementById("myProfileTop").fadeIn(2000);
showme.style.display = "inline";
var showme = document.getElementById("myProfileMain").fadeIn(2000);
showme.style.display = "inline";
}
This code works on my buttons as "onclick="myProfileIn();" so they get to be visible but i also want to include a fadein effect when the button is clicked.
That is why i included ".fadeIn(1000)" but this is not working.
Here is the button which activates the function:
<div id="profileButtonArea"><div id="profileButtonBox"><img onclick="myProfileIn();" id="profileButtonImg" src="<?php echo $userPath; ?>" /></div></div>
And here are the two elements(divs) which are blended in:
<div id="myProfileTop" style="display:none;"></div>
<div id="myProfileMain" style="display:none;"></div>
The issue you have is that fadeIn() is a jQuery method. It's not available on a standard HTMLElement object. Also note that if you want to toggle the element's visibility on successive clicks use fadeToggle().
You should also use unobtrusive Javascript to attach your event handlers as on* event attributes are now considered outdated. As you've tagged the question with jQuery. Here's a working example for all of the above:
$(function() {
$('#profileButtonBox img').click(function() {
$("#myProfileTop, #myProfileMain").stop(true).fadeToggle(2000);
});
});
#myProfileTop,
#myProfileMain {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="profileButtonArea">
<div id="profileButtonBox">
<img id="profileButtonImg" src="yourimage.jpg" title="click me" />
</div>
</div>
<div id="myProfileTop">myProfileTop</div>
<div id="myProfileMain">myPropfileMain</div>
I have one simple questions i want to keep longer to show but what i try not working. i making something wrong probably.
My part of html
<div id="preloader">
<div id="status">
<p class="center-text">
test <br>test <img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
Js my part
// JavaScript Document
(function ($) {
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(400).fadeOut("medium");
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<div id="status">
<p class="center-text">
test<br>test<img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
I want to keep more longer preloader and status after load. I was settimeout or add to hide and show ready functions but nothing change it
Thank you
You used fade out for div#status, the div#preloader still there but you didn't see any after div#status fade out.
I suggest you should
$(window).load(function() {
setTimeout(function() {
//$("#status").fadeOut();
$("#preloader").fadeOut("medium");
}, 400);
});
If you want the div#preloader to remain on screen for longer, then just remove the fade out of div#status:
$(window).load(function() {
$("#preloader").delay(400).fadeOut("medium");
});
I'm currently working on a new personal portfolio site using very basic html/css/jquery code. I'm trying to build my own gallery to display my work (instead of using an already existing one like lightbox) but I've run into an annoying issue: I've tried to make the "forward-button" display the immediate following div but instead it fades in all the following divs. Here's my (condensed) code:
HTML:
<!--navigation buttons for gallery-->
<a id="back-button"><img src="image.png" /></a>
<a id="forward-button"><img src="image.png"/></a>
<!--gallery begins here-->
<div id="gallery">
<div id="first-div" class="work-display">
<img src="images/albumust-display.png" class="work-image" />
<div class="caption" id="wd1c">
<p class="caption-text">caption</p>
</div>
</div>
<div id="second-div" class="work-display">
<img src="images/ce-display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
<div id="third-div" class="work-display">
<img src="images/display.png" class="work-image" />
<div class="caption">
<p class="caption-text">caption</p>
</div>
</div>
CSS (all divs inside gallery are hidden by default):
.work-display {
display:none;
position:absolute;
}
What I'm trying to do with Jquery is that everytime someone opens a thumbnail, give the corresponding div that displays the image on full size a "true" state of "active" and then fade in, like this:
$( "#thumb-1" ).click(function(){
$( "#first-div" ).prop("active",true);
$( "#first-div" ).fadeIn();
});
all divs originally have a state of "active" = false:
$( "#gallery" ).children("div").prop("active",false);
then this is what I've tried to do with the "forward-button":
$("#forward-button").click(function () {
$("#gallery").find( $("div").prop("active",true) )
.prop("active",false)
.fadeOut()
.next().fadeIn();
$(".caption").fadeIn();
});
But then what it does is that instead of fading in only the next div, it fades all the divs that come after. what am I doing wrong?
I'm very new to Javascript/Jquery so probably this isn't the smartest way to go about this, if you have a simpler solution, do tell me.
I couldn't test it properly, because I don't have the whole code (and the images either). But this should do the trick:
$(function () {
$("#gallery div").attr("active", false);
$("#thumb-1").click(function () {
$("#first-div").attr("active", true).fadeIn();
});
$("#forward-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.next()
.attr("active", true)
.fadeIn();
});
$("#back-button").click(function () {
$("#gallery div[active=true]:first")
.attr("active", false)
.fadeOut()
.prev()
.attr("active", true)
.fadeIn();
});
});
Kind of demo: http://jsfiddle.net/W8VLh/13/
Just in case you have a reason to use 'active' properties instead of classes:
$("#forward-button").click(function () {
$("#gallery").find( "div[active='true']")
.prop("active",false)
.fadeOut()
.next().fadeIn().prop("active",true);
$(".caption").fadeIn();
});
I have 6 DIVs that show and hide, triggered by an onClick event. Currently if you click the 6 different pictures that trigger these divs, they all show up on top of eachother.
I would like only one DIV to show up at a time. So when you click a different image, it hides the currently displayed div and shows the new one.
I am guessing I need to loop through these somehow, can anyone point me in the right direction? My code:
<script type="text/javascript">
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function () {
$(".slidingDiv").slideToggle();
});
$(".slidingDiv2").hide();
$(".show_hide2").show();
$('.show_hide2').click(function () {
$(".slidingDiv2").slideToggle();
});
$(".slidingDiv3").hide();
$(".show_hide3").show();
$('.show_hide3').click(function () {
$(".slidingDiv3").slideToggle();
});
$(".slidingDiv4").hide();
$(".show_hide4").show();
$('.show_hide4').click(function () {
$(".slidingDiv4").slideToggle();
});
$(".slidingDiv5").hide();
$(".show_hide5").show();
$('.show_hide5').click(function () {
$(".slidingDiv5").slideToggle();
});
$(".slidingDiv6").hide();
$(".show_hide6").show();
$('.show_hide6').click(function () {
$(".slidingDiv6").slideToggle();
});
});
</script>
Not completely sure if this is what you're going for, but something like this might work:
HTML:
<img class="div1" src=...>
<img class="div2" src=...>
<img class="div3" src=...>
<!-- more images can go here -->
<div class="div1">text1</div>
<div class="div2">text2</div>
<div class="div3">text3</div>
<!-- more divs to display go here -->
JQuery:
$("img").click(function () {
$("div").slideUp(190); // hide divs previously shown
var divSelect = $(this).attr('class'); // get class of div to show
$("div."+divSelect).delay(200).slideDown(); // show div after other slides up
});
WORKING EXAMPLE
I am still working on simplifying it, but it works. You will have to repeat it to every div, giving different selector names. When I figure a loop out, I will let you know.
Good luck!
<!--HTML starts-->
<div class="med-wrap-video">
<div> <p class="body-text"> <iframe width="100%" height="100%" src="https://www.youtube.com/embed/6z9KMHt-Ta4" frameborder="1" allowfullscreen> </iframe>
<br>
Read More</p>
<br>
<span class="selector1">
<p class="body-text">
Title: <br>
Composer: <br>
Year: <br>
</p>
</span>
</div>
</div>
<!--JS begins-->
$(document).ready(function(){
$(".selector1").hide();
$(".a selector").click(function(event){
event.preventDefault(); //prevents page to reload
$(".selector1").slideToggle(600);
$(this).toggleClass(".selector1");
});
Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back
Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?
Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.