jQuery image replacement with class - javascript

i'm really new to all this coding things etc. (1 month :P) and actually i try some things with jQuery.
I used the search function but actually it's quite hard for me to understand everything :P
My goal is:
When i hover over an image another image which sits on top of it slides up and another slides down.
They're all images - i don't want to publish the Website and only want to use it on my Computer for testing ^^
Also the picture on the top should be hidden at first. (I know how to do it but i actually don't know if it will be shown when using slideDown)
HTML:
<div class="newschange">
<div class="News wow fadeInDown animated"><img src="images/News.png" /></div>
<div class="newstext wow fadeInUp animated"><img src="images/newstext.png" /></div>
<div class="newshover"><img src="images/alt/newstext.png" /></div>
</div>
My jQuery Script: (it's actually in the header of the HTML)
<script>
$(function() {
$('.News').mouseover(function (){
$(.'newstext').slideUp(300);
$(.'newshover').delay(400),slideDown(300);
});
})
</script>
CSS (i don't know if this is necesarry for this :P)
.newshover {
position: absolute;
left: 802px;
top: 455px;
width: 359px;
height: 35px;
}
.newstext {
position: absolute;
left: 781px;
top: 456px;
width: 446px;
height: 32px;
}
.News {
position: absolute;
left: 377px;
top: 276px;
width: 854px;
height: 318px;
}
The problem is just that nothing happens when i hover over it :)
Here is a Screenshot:
http://i.stack.imgur.com/dzyFH.png
The 1. image is the whole thing with at the top "News" the image and the rounded rectangle.
NEWS SECTION! is the one i want to show AFTER i hover over the first image.
The red Text behind it is the one i want to hide when i hover over the first image. :)
//solved Code
<script>
$( document ).ready(function() {
$(".News").on('mouseenter',function () {
$(".newshover").delay(600).slideToggle(500);
$(".newstext").slideToggle(500);
});
$(".News").on('mouseleave', function(){
$(".newshover").slideToggle(500);
$(".newstext").delay(600).slideToggle(500);
})
});
</script>
<script>
$(function(){
$(".newshover").hide(0);
})
</script>

If I understood well your question this piece of code should work: https://jsfiddle.net/5naaq121/
HTML:
<div class="newschange">
<div class="News"><img src="http://maalaeasurfresort.com/wp-content/uploads/2014/09/beach_cy.jpg" /></div>
<div class="newstext"><img src="http://www.honduras.com/wp-content/uploads/2012/05/white-sandy-beach2-300x200.jpg" /></div>
<div class="newshover"><img src="http://www.lakecountyparks.com/_images/whihala_beach/wb_beach.jpg" /></div>
</div>
JS:
$(function(){
$('.newschange').mouseenter(function (){
$('.newshover').slideUp(300);
$('.newstext').delay(400).slideUp(300);
})
});
CSS:
.newschange {
display:block;
width:300px;
height:200px;
position:relative;
overflow:hidden;
}
.newshover {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}
.newstext {
position: absolute;
left:0;
bottom:0;
width:300px;
height:200px;
}
.News {
position: absolute;
left:0;
top:0;
width:300px;
height:200px;
}

Related

Snooks slideshow

I've seen the slideshow, I got all the code from there but the images never disappear, they are added in front of the old ones and it overcharges my website. Anyone knows how to solve it? Here's the code:
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<div class="fadein">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
In this fiddle, it works, but in my website, it doesn't. Any help?
MORE INFORMATION
This image is from the console, so you can see the amount of images that are created..
No errors in console.
EDIT
I went to get another slideshow from the same site, but so I could get multiple, and got what I wanted except one thing, the fadeIn is bugged, it starts to fade but then it cancels and changes to the next image.
<style>
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<script>
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 4000);
})
});
</script>
I've made some updates to your code that should fix the slideshow. There were some syntax errors and I also made the selectors a bit easier to read, imo.
$(document).ready(function() {
$('.multipleslides').each(function() {
// scope everything for each slideshow
$(this).children('img').not(":eq(0)").hide();
setInterval(function() {
$(this).children('img').first().fadeOut().next().fadeIn().end().appendTo($(this));
}.bind($(this)), 4000);
});
});
.multipleslides {
position: relative;
height: 332px;
width: 500px;
float: left;
}
.multipleslides>* {
position: absolute;
left: 0;
top: 0;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multipleslides">
<img src="https://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
<img src="https://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
<img src="https://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>

jQuery toggle() with dblclick() changing display to none

I have created a div that when I double click it, it will expand the entire contents of the div to full screen. I now want to be able to toggle this when double clicking so it goes back to original size.
The code was working to increase the div size, but once adding the toggle() function, it now changes the display to none when I double click the first time. I assume I am just using toggle incorrectly, but am unable to figure out how to make this work.
HTML
<div class="popout-box">
<button id="btnShow">Wallboard</button>
<div class='menu' style='display: none'>
<div id="framewrap">
<button id="btnHide">Close</button><br/>
<iframe id="frame" src="https://url.com">
</iframe>
</div>
</div>
</div>
</div>
jQUery
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$("#framewrap").toggle().css({"width":"100%","height":"100%","position":"fixed","left":"0px","right":"0px","top":"5px","bottom":"0px"});
});
});
CSS
#framewrap {
background-color:#1886c5;
overflow:hidden;
box-shadow: 0px 2px 10px #333;
}
#frame {
width:100%;
height:100%;
background-color:#1886c5;
}
.popout-box {
width: 400px;
height: 300px;
}
.menu {
position: absolute;
right: 15px;
}
I believe this is what you're after:
$(document).ready(function(){
$("#framewrap").dblclick(function(){
$(this).toggleClass('newClass');
});
});
CSS:
.newClass
{
width:100%,
height:100%,
...
...
}
jQuery
$(document).ready(function() {
$("#framewrap").on('dblclick', function() {
$("#framewrap").toggleClass('fixed');
});
});
CSS
.fixed {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
top:5px;
bottom:0
}

Horizontal slide banner design & functionality

I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look
You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?
Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>
You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM
use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well
I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}

Show ADS on the bottom of the page when hover

I want to show the Google Ads on the bottom of my website, but I want it to appear only when the mouse hovers (or clicks) an arrow icon. I don't know if you understand what I mean. I want the AD to slide from nowhere when the mouse hovers an arrow on the bottom of the page.
Which JS and CSS codes do I need for that function?
My codes now:
HTML
<div id="footer"> <center><script src="http://fanscity.eu/ads/728x90.js"></script></center> </div>
CSS
#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.69);
padding: 20px;
}
Thank you!
I think you need this
UPDATE :
HTML
<div id="footer">footer</div>
<img id="img" src="arrow.png"/>
CSS
#footer{
display:none;
height:40px;
background-color:#666;
position:absolute;
width:100%;
bottom:0;
left:0
}
#img{
position:absolute;
bottom:0;
right:0
}
JS
<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(e) {
var ishover = false;
$(document).on("mouseover",'#footer',function(){
ishover = true;
}).on("mouseleave",'#footer',function(){
$(this).stop().fadeOut();
ishover = false;
}).on("mouseover",'#img',function(){
$('#footer').stop().fadeIn();
}).on("mouseleave",'#img',function(){
if(!ishover)
$('#footer').stop().fadeIn();
});
});
</script>

How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

I've been piecing together code and tweeking it to eventually come together with this. The code itself is fairly simple and basically just saying that once someone visits the page for the first time then drop a cookie and no longer display it for the visitor when he visits the page, well for 365 days. My only issue is that once the div loads and loads out, I can't figure out how to fade in and fade out the background, I can only fade the div itself. I've tried wrapping it in a overlay div but I think I'm approaching it all wrong.
The code looks a bit much on here so I've attached a jsfiddle for a working example: http://jsfiddle.net/newbieturd/F29uv/
** Note: Once you run the fiddle once, you will have to clear your cookie. The DIV only appears once
CSS:
#welcome {
box-sizing:border-box;
padding:34px 18px 18px 18px;
height:120px;
width:300px;
background:Salmon;
color:#f9f9f9;
border-radius:6px;
position:absolute;
top:50%;
left:50%;
margin:-60px 0 0 -150px;
font:300 normal 1.4em/1.2 'Signika', sans-serif;
display:none;
}
#close {
height:30px;
width:30px;
background:url('http://www.omagdigital.com/images/articles/WebArticle-CloseButton.png') no-repeat;
position:absolute;
top:2px;
right:2px;
cursor:pointer;
}
JS:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
(function(factory){if(typeof define==='function'&&define.amd){define(['jquery'],factory);}else{factory(jQuery);}}(function($){var pluses=/\+/g;function raw(s){return s;}function decoded(s){return decodeURIComponent(s.replace(pluses,' '));}function converted(s){if(s.indexOf('"')===0){s=s.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,'\\');}try{return config.json?JSON.parse(s):s;}catch(er){}}var config=$.cookie=function(key,value,options){if(value!==undefined){options=$.extend({},config.defaults,options);if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}value=config.json?JSON.stringify(value):String(value);return(document.cookie=[config.raw?key:encodeURIComponent(key),'=',config.raw?value:encodeURIComponent(value),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}var decode=config.raw?raw:decoded;var cookies=document.cookie.split('; ');var result=key?undefined:{};for(var i=0,l=cookies.length;i<l;i++){var parts=cookies[i].split('=');var name=decode(parts.shift());var cookie=decode(parts.join('='));if(key&&key===name){result=converted(cookie);break;}if(!key){result[name]=converted(cookie);}}return result;};config.defaults={};$.removeCookie=function(key,options){if($.cookie(key)!==undefined){$.cookie(key,'',$.extend({},options,{expires:-1}));return true;}return false;};}));
function setCookie() {
$.cookie("visited", "true", { expires: 365 });
}
if ($.cookie('visited') != 'true') {
$('#welcome').show(1800);
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(1800);
});
// $.cookie("visited", null);
});//]]>
</script>
HTML:
<div id="welcome">
<span id="close"></span>
Interstitial Message. You will only see this message once every 365 days.
</div>
<p> Hello World. </p>
Is this what you are looking for? I gave the popup a parent container that will serve as the overlay.
HTML:
<div class="overlay">
<div id="welcome">
<span id="close"></span>
This is the only time you will see this message :)
</div>
</div>
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 99;
}
jQuery:
if ($.cookie('visited') != 'true') {
$('#welcome, .overlay').show(100); // If the condiditon is true then show overlay
setCookie();
} else {
$('#welcome').remove();
}
$('#close').click(function() {
$('#welcome').hide(100); // Can also be added to this jQuery selector but the animation was odd
$('.overlay').fadeOut(100); // Fades out on click
});
Finally the fiddle: DEMO
Give your #welcome div a z-index (11 for example) and add css to give your document body full height and width:
html, body {
height: 100%;
width: 100%;
}
You're going to add a glass pane div to the body and it needs a height and width to fill the body of the page which, in your current example, has no height or width set
And then add a background div with a color of your choosing and a z-index less than your #welcome div such as:
<div id="glass_pane" style="width: 100%; height: 100%; z-index: 10; position: absolute: top: 0px; left: 0px; background-color: #000;"></div>
Ans then fade it in or out, remove it when you like, change the transparency

Categories