Develop Reference

How to Auto-Expand an IFrame in a DIV element when user clicks inside it?

I have an IFrame source (JQuery-UI Datepicker) embedded inside a DIV. When the user clicks inside the iframe to select a date, the iframe should grow in width and height to accomodate the height of the datepicker-calender. Once date picking is done, the IFrame should come back to its original size.
JSFiddle : https://jsfiddle.net/Jersey_Guy/yoc9jewv/
$(document).ready(function() {
//debugger;
var $w = $(window),
$dateframe = $("iframe[src*='jqueryui']");
$dateframe.blur(function() {
console.log("Called Resize");
$(this).width = 100;
$(this).height = 100;
}).resize();
$dateframe.click(function() {
console.log("Called Resize");
$(this).width(200);
$(this).height(400);
}).resize();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color: rgba(255, 255, 255, 0); width: 474px; height: 127px; top: 5px; left: 3px;">
Outer Div
<div class="tab-web tab-widget fade-in">
Inner Div
<div style="position: absolute;">
IFrame Floater Div
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 200px; height: 80px; top: 0px; left: 0px;">
</iframe>
End IFrame Div
</div>
End Inner Div
</div>
End Outer Div
</div>
Do I need to set the div size along with the IFrame size?
Where am I going wrong?

I think you can do this by working on divs instead of the iframe.
I modified your fiddle here: https://jsfiddle.net/bkelley13/faLeucpp/1/
var dateframe = $("#myframediv");
$(document).click(function() {
dateframe.width(100);
dateframe.height(50);
dateframe.resize();
});
dateframe.click(function(ev) {
$(this).width(400);
$(this).height(200);
ev.stopPropagation();
}).resize();
and
<div id="myframediv" style="background-color:yellow">
IFrame Floater Div
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html">
</iframe>
So if you click in the iframe div, it resizes, and if you click outside it, it resizes. (I don't know about target jqueryui page, datepicker doesn't seem to bubble up the click event.)

Solved it ! The click and blur functions not triggering were the problem. Had to use the mousenter and mouseleave along with jquery animate function to get the iframe to expand and contract.
Here is my code: https://jsfiddle.net/Jersey_Guy/4zja94j4/
$(document).ready(function() {
//debugger;
var $w = $(window),
$dateIframe = $("iframe[src*='jqueryui']"),
$dateInnerDiv = $("#myframediv");
$dateIframe.mouseleave(function() {
console.log("Called Iframe Reduce");
$(this).animate({
width: "190px",
height: "90px"
}, 500);
//Optional: slow down the exit to 500 ms in case user changes their mind
});
$dateIframe.mouseenter(function() {
console.log("Called Iframe increase");
$(this).animate({
width: "390px",
height: "290px"
}, 0);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-zone tab-widget tabZoneSelected tabSuppressVizTooltipsAndOverlays tabZone-web fade-bg" id="tabZoneId1" style="z-index: 17; background-color:white; width: 500px; height: 300px; top: 5px; left: 3px;">
Outer Div
<div class="tab-web tab-widget fade-in" style="background-color:gray;">
Inner Div
<div id="myframediv" style="position: absolute; background-color:yellow;">
IFrame Floater Div before
<iframe name="frame_1" src="https://jqueryui.com/resources/demos/datepicker/default.html" style="border: 0px none; width: 190px; height: 90px; top: 0px; left: 0px; background-color:orange;">
</iframe> End IFrame Div after
</div>
End Inner Div
</div>
End Outer Div
</div>

Float image code on the side of website?

So I have this code here, and I want to float it on the right side of the screen, like next to the scroll bar.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://i.imgur.com/JrrRHqr.jpg";
staticImage1 = new Image();
staticImage1.src="http://i.imgur.com/Mu27x47.jpg";
// End -->
</script>
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://my_button_image" border=0></a>
I would like it to keep it's functionality. Also, if possible, please incorporate my question in your answer.
Thanks!
EDIT: I want it to be like this
IMAGE 1
But with my image code that chaged when you hover over it....
EDIT2: Here's the code I'm using (HTML)
<script>
<!-- Begin
loadImage1 = new Image();
loadImage1.src="http://i.imgur.com/JrrRHqr.jpg";
staticImage1 = new Image();
staticImage1.src="http://i.imgur.com/Mu27x47.jpg";
// End -->
</script>
<body>
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://i.imgur.com/Mu27x47.jpg" id="image1"></a>
<div class="content">
</div>
</body>
Then CSS
#image1{
position: fixed;
top:50px;
left: 0;
width: 50px;
height:50px
}
.content {
width: 200px;
margin: auto;
background-color: white;
}
Here is an image of what it's doing to my site...
IMAGE

You want it to be fixed, rather than absolute, I assume. So when you scroll your page, your image won't move. If so, try this:
https://jsfiddle.net/4959aeg2/5/
CSS:
#image1{
position: fixed;
top:50px;
left: 0;
width: 50px;
height:50px;
}
HTML:
<a href="URL HERE" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="http://i.imgur.com/Mu27x47.jpg" id="image1"/></a>
If you want the image to scroll with your page, just change position: fixed; to position: absolute;

Is this what you are looking for? jsfiddle.net/u9s4rh57/2/ (UPDATED)
.HTML
<img src="//i.imgur.com/JrrRHqr.jpg"
data-alt-src="//i.imgur.com/Mu27x47.jpg" class="myImage"/>
.CSS
.myImage{
position: fixed;
bottom: 0px;
right: 0px;
width:100px;
height:100px;
}
and JS for "swapping" images from this post from #Cᴏʀʏ
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.myImage').hover(sourceSwap, sourceSwap);
});

If i am understanding you right you can do something like this.
https://jsfiddle.net/u6kd4vqc/9/
.myclass {
position: absolute;
right: 10px;
top: 20px;
}

(Posted on behalf of the OP).
I got it to work! Thanks Edmar Miyake and everyone! I had to edit Edmar's code a little to get it to work. Here's what I did. I removed <div class="content"> in the HTML.
Here's the finished code!
HTML
<script>
<!-- Begin
loadImage1 = new Image();
loadImage1.src="SECOND IMAGE";
staticImage1 = new Image();
staticImage1.src="FIRST IMAGE";
// End -->
</script>
<body>
<a href="http://www.allaboutgod.com/how-to-be-saved.htm" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;" target="_blank">
<img name="image1" src="FIRST IMAGE" id="image1">
</div>
</body>
CSS
#image1{
position: absolute;
top:2500px;
left: 0;
width: 125px;
height:332px;
}
.content {
width: 100%;
margin: auto;
background-color: white;
}

Youtube video as a site background (tubular.js) shows on top of my other components instead of in the back

I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..

I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.

Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}

how I can give link to slide to redirect to other page

I am creating a slide show in with help of Jquery as below.I am able to get the slide show .But I am not able to give the link to each slide using href
Plseae help me .
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.fade {
position: relative;
width: 650px;
height: 373px;
}
.fade img {
position: absolute;
left: 0;
top: 0;
width: 650px;
height: 373px;
}
</style>
<script>
$(function () {
$('.fade img:gt(0)').hide();
setInterval(function () {
$('.fade :first-child').fadeOut(3000)
.next('img').fadeIn(3000).end()
.appendTo('.fade');
}, 4000);
});
</script>
<div class="fade" style="width: 603px; height: 373px; z-index: 1; border-radius: 10px 10px 10px 10px; left: 295px; top: 224px; position: absolute">
<img src="images/SAM_0043.JPG" href="www.xyz.com" >
<img src="images/SAM_0047.JPG" href="www.xyz.com" >
<img src="images/SAM_0044.JPG" href="www.xyz.com" >
</div>
</body>

Try
<img src="images/SAM_0043.JPG" >
img tag has no href attribute.
wrap img tag with a tag n give href
Or with jQuery using your current code wrap a tag around img
fiddle Demo
$('div.fade img').wrap(function () {
return '';
});

embed the img tag into the anchor tag, and provide the href="" to the anchor tag. Your work is done.

href is not an img tag attribute so better to change the html to
<img src="" />
and if you dont want to change your html you can use code below to redirect to links on click on images
$(".fade img").bind('click',function(){
window.location = $(this).attr("href");
});

custom cursor with onclick sound effect

I'm trying to change the cursor to a custom image with a sound effect. My current problem is the cursor disappears but the replacement image does not show up, and the sound clip is not playing. What did I do wrong?
<head>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1152px;
height:864px;
z-index:2;
left:25px;
top:25px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function setCursor() {
oBoxInner.innerText=sInput.value;
oBoxInner.style.display='block';
oBox.style.cursor="crosshair.gif";
}
</SCRIPT>
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML="<embed src=\""+gunshot.mp3+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
</head>
<body bgcolor="#000000">
<div id="apDiv1">
<span id="gunShot" onclick="playSound('gunshot.mp3');">
<a href="3.html" onmouseover="setCursor" onmouseclick="playSound('gunshot.mp3')"> <img src="score.gif" width="1152" height="864" alt="yep" />
</a></span>
</div>
</body>
Thank you for your help.
EDIT:
I'm using dreamweaver with both PC and Mac for multiple browser compatibility, mainly IE, Firefox, Chrome, and Safari. I was thinking the .gif might be part of the issue instead of .cur. The other cursor code I'm using is this:
<head>
<script type="text/javascript">
$(document).ready(function(){
$('#test-area').mouseout(function(){
$('#mycursor').hide();
return false;
});
$('#test-area').mouseenter(function(){
$('#mycursor').show();
return false;
});
$('#test-area').mousemove(function(e){
$('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
});
});
</script>
<style type="text/css">
#test-area {
height: 1152px;
width:864px;
border: 3px dashed #CCCCCC;
background: #FFFFFF;
padding: 20px;
cursor: none;
top: 25px;
left: 25px;
z-index:1;
}
#mycursor {
cursor: none;
width: 100px;
height: 100px;
background: url(crosshairs.cur);
repeat: no-repeat;
position: absolute;
display: none;
top: 0;
left: 0;
z-index: 10000;
}
</style>
</head>
<body bgcolor="#000000">
<div id="test-area">
Move mouse over this area.
</div>
<div id="mycursor">
</div>
</body>

you have a few errors in the code
oBox is not defined. oBox.style.cursor="crosshair.gif";
The cursor is best to be .cur
the embed tag i only think supports MIDI, and your referencing gunshot.mp3 in your oncick and trying to call reffrence to \""+gunshot.mp3+"\" in the src, should be soundfile
and you have document.getElementById("gunShot").innerHTML=document.getElementById("gunShot").innerHTML TWICE?
What browsers are you wanting to support the sound? Netscape, IE6, Chrome.. ect