We Keep Coding

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
}

jQuery image replacement with class

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;
}

Applying Hover effect to responsive height image

I have three column layout. The left and right columns are full background images that I need hover effects for. I couldn't achieve this in CSS so I'm attempting jQuery, but I'm having an issue when it comes to position: absolute on both elements.
It requires I put a height on the image, but I need it to stay responsive. I tried position relative but there is now a noticeable jump when hovering. Here's my fiddle:
http://jsfiddle.net/faumX/4/
Here's an example of my code,
html:
<div class="one-third">
<div class="bg-image">
<img src="http://placehold.it/429x900&text=left+up" id="leftUp" />
<img src="http://placehold.it/429x900&text=left+over" id="leftOver" style="display:none;" />
</div>
</div>
css:
.one-third {
display:inline;
float:left;
width:33.332%;
max-width: 420px;
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image {
position: relative;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
.bg-image img {
display: block;
width: 100%;
max-width: 420px;
min-height:10px;
height:auto;
max-height:900px;
overflow:hidden;
}
#leftUp {
position:relative;
top:0;
left:0;
}
#leftOver {
position:relative;
top:0;
left:0;
}
js:
$('#leftUp').mouseenter(mouseEnterLeft);
$('#leftOver').mouseleave(mouseLeaveLeft);
var mouseEnterLeft = function(){
$('#leftUp').fadeOut();
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').fadeIn();
$('#leftOver').fadeOut();
}
I'm realtively new to this, if there is a CSS solution to this that is better, I'm open to any suggestions.
Thanks for the help.

I changed a few things on your fiddle the problem is when you fade things out they dissapear and opacity is better for this.
I placed the overlay image above the default one and set it to absolute, this way it will be over it but it's hidden on start.
The focus is on the parent div not the image, since it dissapears when you hover it.
Play around with it and see if you can understand what I did, let me know if this is what you were looking for.
$(document).ready(function(){
$('#rightUp').mouseenter(mouseEnterRight);
$('#rightOver').mouseleave(mouseLeaveRight);
$('#left').mouseenter(mouseEnterLeft);
$('#left').mouseleave(mouseLeaveLeft);
});
var mouseEnterRight = function(){
$('#rightUp').fadeOut();
$('#rightOver').fadeIn();
}
var mouseLeaveRight = function(){
$('#rightUp').fadeIn();
$('#rightOver').fadeOut();
}
var mouseEnterLeft = function(){
$('#leftUp').animate({opacity:0});
$('#leftOver').fadeIn();
}
var mouseLeaveLeft = function(){
$('#leftUp').animate({opacity:1});
$('#leftOver').fadeOut();
}
http://jsfiddle.net/faumX/14/

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

Javascript/HTML/CSS popup

I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!

You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>

If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/