Include iframe on click of jquery tab? - javascript

I have below code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css"/>
ul.tabs {
float:left;
list-style:none;
height:22px;
width:100%;
border-radius:8px 0 -50px 0;
margin:0;
padding:0;
}
ul.tabs li {
float:left;
height:21px;
line-height:21px;
border:1px solid #999;
overflow:hidden;
position:relative;
background:#ADD8E6;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
margin:0 2px -1px 0;
padding:0;
}
ul.tabs li a {
text-decoration:none;
color:#000;
display:block;
font-size:1em;
border:1px solid #fff;
outline:none;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
padding:0 20px;
}
ul.tabs li a:hover {
background:#ADD8E6;
}
html ul.tabs li.active,html ul.tabs li.active a:hover {
background:#fff;
border-bottom:1px solid #fff;
}
.tabContainer {
border:1px solid #999;
overflow:hidden;
clear:both;
float:left;
width:100%;
background:#fff;
-webkit-border-radius:8px;
-webkit-border-top-left-radius:0;
-moz-border-radius:8px;
-moz-border-radius-topleft:0;
border-radius:8px;
border-top-left-radius:0;
}
.labelStyle{
font-weight:bold;
font-size:1.5em
}
.tabContent {
font-size: 12px;
padding:20px;
}
.chkAlign{
margin-left:143px
}
</style>
<script>
$(document).ready(function() {
//hiding tab content except first one
$(".tabContent").not(":first").hide();
// adding Active class to first selected tab and show
$("ul.tabs li:first").addClass("active").show();
// Click event on tab
$("ul.tabs li").click(function() {
// Removing class of Active tab
$("ul.tabs li.active").removeClass("active");
// Adding Active class to Clicked tab
$(this).addClass("active");
// hiding all the tab contents
$(".tabContent").hide();
// showing the clicked tab's content using fading effect
$($('a',this).attr("href")).fadeIn('slow');
return false;
});
});
</script>
</head>
<body>
<ul class="tabs">
<li>SEO</li>
<li>Attributes</li>
<li>Classification SIC</li>
</ul>
<div class="tabContainer">
<div id="tab1" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=sic&gid=138370"></iframe>
</div>
<div id="tab2" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=us&tab=some&gid=235"></iframe>
</div>
<div id="tab3" class="tabContent">
<iframe style="width:90%" src=" http://10.204.66.70:8080/myApp/myUI.do?geo=uk&tab=sic&gid=789"></iframe>
</div>
</div>
</body>
</html>
On click of each tab, i need render some page in an iframe. But above code is not working. Am i doing anything wrong here?
How can i do this?

first thing first it may be that the header send by the iframe is X-Frame-Options so the website refuses to response in the iframe.
your url seems wrong, space avec the double quote of the src and the port of the website should be followed by a /
try to replace your adresses by a local file on your post. Your code should work.

Related

Trying to code jQuery HTML5 chat box program with mouse click event response

I am having issues coding a chat box program for a school project. I am having 3 problems with the program. First, my chat message does not post properly in my chat box. Secondly, I want to be able to click exit and have it close to window but am not completely sure how to do it. Lastly, I would like the chat to echo the message or to have ahard coded response at the least. I'm researching how to do that I'm not quite sure how to do this. I have a style sheet and html. Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<link rel="stylesheet" type="text/css" href="jQuery.css">
//my issues seem to be in my Javascript between here************************************
<script type="text/javascript">
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val()
var old = $('#chatbox').html()
$('#chatbox').html(old + '<p>' + message + '</p>');
});
});
</script>
<script >
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
//and here*****************************************************************************
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome <b></b></p>
//Possible issue here*******************************************************************
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
</body>
</html>
Here is my css:
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
Some of the css is unnecessary I'm pretty sure but when I tried taking some out it caused issues. Any help is greatly appreciated.
try copying the following - i put the styling into the head, moved the javascript to the end, and swapped the input for a button. This is ties to the onclick and appends the new comment into the chat window. It works, but could be done better, also I have not addressed the issue of closing the window, but this does post the new comment into the chat region.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<style>
body {
font:12px arial;
color: #222;
text-align:center;
padding:35px; }
form, p, span {
margin:0;
padding:0; }
input {
font:12px arial; }
a {
color:#0000FF;
text-decoration:none; }
a:hover {
text-decoration:underline; }
#wrapper, #loginform {
margin:0 auto;
padding-bottom:25px;
background:#EBF4FB;
width:75%;
border:1px solid #ACD8F0; }
#loginform {
padding-top:18px; }
#loginform p {
margin: 5px; }
#chatbox {
text-align:left;
margin:0 auto;
margin-bottom:25px;
padding:10px;
background:#fff;
height:270px;
width:430px;
border:1px solid #ACD8F0;
overflow:auto; }
#chatbox p {
padding:1em;
margin:1em;
background:#E6E6E6;
border:1px solid #BDBDBD;
-moz-border-radius:4px;
}
#usermsg {
width:395px;
border:1px solid #ACD8F0; }
#submit {
width: 60px; }
.welcome {
float:left; }
.logout {
float:right; }
.msgln {
margin:0 0 2px 0; }
</style>
</head>
<body>
<div id="wrapper">
<div id="menu">
<p class="welcome">Welcome</p>
<p class="logout"><a id="exit" href="#" onclick="window.close();">Exit Chat</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox">
<p>Here's our chat data</p>
</div>
<form name="message">
<input name="usermsg" type="text" id="usermsg" size="63" />
<button type="button" id="submitmsg" value="send">Send</button>
</form>
</div>
<script>
$(document).ready(function(){
$('#submitmsg').click(function(){
var message = $('#usermsg').val();
$('#chatbox').append('<p>' + message + '</p>');
$('#usermsg').val('');
});
});
function close_window(url){
var newWindow = window.open('', '_self', ''); //open the current window
window.close(url);
};
</script>
</body>
</html>
one problem is that you are using a form that then posts to the same page - reloading it.
I copied your code into a testpage (called chatTest.html) and got the following url after hitting the send button:
chatTest.html?usermsg=test+message&submitmsg=Send
your message does get posted into the chat section but is then removed when the page reloads. and because you are not specifying a method - it is treating it as a get form and posting the message as a querystring appended to the url.
if you are planning on saving the comments to a database, then you should change the action of the form to a different php page, process the results and return the saved content into the chat section- perhaps using Ajax so that you don;t have to reload the page on every chat submission.

Need help making tab page in HTML

I am working on making a page that has multiple tabs each tab has different content in it. I looked online for tutorials and found this site http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery. I have been following it, i have tweaked the settings to how I want it to look however when I try to click on a different tab nothing changes. I am still pretty new to jquery so I am a little confused in that field and I was hoping someone could help me out and let me know what to do.
The problem is that the tab are not switching upon clicking
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./common/res.css"/>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active">Stage</li>
<li>Studio</li>
<li>Session</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
</div>
</body>
</html>
en/*----- Tabs -----*/
.tabs {
width:100%;
display:inline-block;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
}
.tab-links a {
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
li.active a, li.active a:hover {
background:#fff;
color:#4c4c4c;
}
/*----- Content of Tabs -----*/
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}
.tab {
display:none;
}
.tab.active {
display:block;
}ter code here
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
Thanks
<!DOCTYPE html><html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<title>Room Reservation</title>
</head>
<header>
</header>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active" data-toggle="#tab1">Stage</a></li>
<li data-toggle="#tab2">Studio</li>
<li data-toggle="#tab3">Session</li>
</ul>
</div>`
<div class="tab-content">
<div id="tab1" class="tab active">
<form>
Room Selection:<br>
<select name="room">
<option value="">Select Room</option>
<option value="stage">Stage Access</option>
<option value="grip">Grip Closet</option>
<option value="grid">Grid</option>
</select>
</form>
</div>
<div id="tab2" class="tab">
<p>Studio</p>
</div>`
<div id="tab3" class="tab">
<p>Session</p>
</div>
</div>
<style>`
`.tabs {
width:100%;
display:inline-block;
}
.tab-links li {
margin:0px 5px;
float:left;
list-style:none;
padding:9px 15px;
display:inline-block;
border-radius:3px 3px 0px 0px;
background:#7FB5DA;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
}
.tab-links li:hover {
background:#a7cce5;
text-decoration:none;
}
li.active, li.active:hover {
background:#fff;
color:#4c4c4c;
}
.tab-content {
padding:15px;
border-radius:3px;
box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
background:#fff;
}`
.tab {
display:none;
}
.tab.active {
display:block;
}`
</style>
<script>
jQuery(document).ready(function() {
jQuery('.tabs .tab-links li').on('click', function(e) {
tabs(jQuery(this).attr('data-toggle'));
jQuery(this).addClass('active').siblings().removeClass('active');
});`
function tabs(tab) {
jQuery('.tab-content .tab').hide()
jQuery('.tab-content').find(tab).show();
}
});
</script>
</body>
</html>
First of all you should include jquery library, then correct your html, and use fucntions from start please, be true! :D I suggesting you to not use a tags in tabs

What technique do I use to get text into each individual tab?

I have been stuck on this for ages, here is my code so far:
<html>
<head>
<script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
body, html, div, ul, li, a {
margin:0;
padding:0;
}
body {
font-family:arial;
font-size:12px;
color:#000000;
}
.clear {
clear:both;
}
ul {
list-style:none;
position:relative;
z-index:2;
top:1px;
display:table;
border-left:5px solid #808080;
}
ul li {
float:left;
}
ul li a {
background:#000000;
color:#000000;
display:block;
padding:6px 15px;
text-decoration:none;
border-right:100px solid #000000;
border-top:1px solid #000000;
border-right:3px solid #808080;
}
ul li a.selected {
border-bottom:1px solid #808080;
color:#000000;
background:#808080;
}
h1 {
display:block;
width:600px;
margin:0 auto;
padding:200px 0;
color:#000000;
}
#navigation {
width:602px;
margin: 0 auto;
}
#content {
width:600px;
margin:0 auto;
height:200px;
background:#ffffff;
border:1px solid #000000;
z-index:1;
text-align:center;
padding:10px 0;
}
#logo {
width:600px;
margin:0 auto;
padding:10px 0;
text-align:right;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><font color="white">Tab 1</li>
<li><font color="white">Tab 2</li>
<li><font color="white">Tab 3</li>
<li><font color="white">Tab 4</li>
<li><font color="white">Tab 5</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<p id="content_changer">You have selected Tab 1</p>
<p>See the page source for full code</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#navigation ul a').click(function() {
$('#navigation ul a').removeClass('selected');
$(this).addClass('selected');
$('#content_changer').html('You have selected ' + $(this).html());
});
});
</script>
</body>
</html>
I can not figure out how to get one of these tabs menu thing to work, I have tried so many different methods but nothing will work.
It's not very good code, but it works for me. The only problem is that the #content text is set to font color white, so you can't see it, though it is there.
You should avoid font tags, as they are badly out of date, as well as inline JS.
I tried running your code. I found that the text is written #content_changer element, but its white colored.
Here's how you can solve it.
Add the following css rule
#content_changer{
color:#000;
}
Change the $(this).html() to $(this).text().
That much should do.
The problem is not in your JS, but in your CSS. Font color is white on the links in the navigation, which means it will be invisible on the content area. Also, using is deprecated and you need to set content-area color to black.
Here is a working jsFiddle:
http://jsfiddle.net/8ftyy/
Differences are these:
#content_changer {
color: black;
}
ul li a {
color: white;
}
and no font-color in html.

How to open a jquery tab from a link that is outside the tab?

I have found a nice tabs system (link to the tab system) on the internet to let the users navigate through my website. However I am not that good in coding. I have somehow managed to get things working.
I am trying/ tweaking for two days to get it working. Recording to this code I would be able to make a link that will open a specified tab. How could you make a link that -when clicked on it- would open the specified tab.
This code will do the trick but do not know how to implement this code in my existing Javascript code.
CODE:
var $tabs = $('#example').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 2); // switch to third tab
return false;
});
Found this code at this website
HTML CODE:
<div id="tabs">
<ul>
<li><a class="active" href="#tab1">HOME</a></li>
<li>SERVICES</li>
<li>OPTIONS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
</ul><!-- //Tab buttons -->
<div class="tabDetails">
<div id="tab1" class="tabContents">
<h1>Title1</h1>
<iframe src="Home.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab1 -->
<div id="tab2" class="tabContents">
<h1>Title2 </h1>
<h2> </h2>
<h3> </h3>
<iframe src="Services.html" width="1150" height="640" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab2 -->
<div id="tab3" class="tabContents">
<h1>Title3</h1>
<iframe src="Options.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab3 -->
<div id="tab4" class="tabContents">
<h1>Title4 </h1>
<iframe src="Aboutus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab4 -->
<div id="tab5" class="tabContents">
<h1>Title5</h1>
<iframe src="Contactus.html" width="1150" height="600" frameBorder="0" scrolling="no">Browser not compatible. </iframe >
</div><!-- //tab5 -->
</div><!-- //tab Details -->
</div><!-- //Tab Container -->
CSS:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tab</title>
<style type="text/css">
*{margin:10; padding:0;}
body{
font:normal 14px/1.5em Arial, Helvetica, sans-serif;
}
a{outline:none;}
#tabs{
background:#f0f0f0;
border:1x solid #fff;
margin:100px auto;
padding:20px;
position:absolute;
width:1315px;
}
#tabs ul{
overflow:hidden;
border-left:0px solid #fff;
height:80px;
position:center;
z-index:100;
}
#tabContaier li{
float:left;
list-style:none;
}
#tabs li a{
background:#ddd;
border:3px solid #ffff;
border-left:0;
color:#666;
cursor:pointer;
display:block;
height:35px;
line-height:35px;
padding:0 98px;
text-decoration:none;
text-transform:bold;
}
#tabs li a:hover{
background:#fff;
}
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px;
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px;
}
.tabContents{
padding:px
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
</style>
JAVASCRIPT CODE:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".selector" ).tabs( "refresh" );
// Hide all tab conten divs by default
$(".tabContents").hide();
// Show the first div of tab content by default
$(".tabContents:first").show();
//Fire the click event
$("#tabContaier ul li a").click(function(){
// Catch the click link
var activeTab = $(this).attr("href");
// Remove pre-highlighted link
$("#tabContaier ul li a").removeClass("active");
// set clicked link to highlight state
$(this).addClass("active");
// hide currently visible tab content div
$(".tabContents").hide();
// show the target tab content div by matching clicked link.
$(activeTab).fadeIn();
return false;
});
});
</script>
Your problem was you were selecting the tab with a different jquery tab. Use this Javascript function to change the selected tab.
function selectTab(tabIndex) {
var selector = "a[href='#tab" + tabIndex + "']";
var tab = "#tab" + tabIndex;
$("#tabContaier ul li a").removeClass("active");
$(selector).addClass("active");
$(".tabContents").hide();
$(tab).fadeIn();
}
Link:
<a href="#" onclick="selectTab(2);" >Go to tab 2</a>
This will work if you use the same link nomenclature as you are using now (href for links as "tab1, tab2" etc, and the divs named "tab1, tab2" etc...
Good luck.
It looks like you're over-complicating this and trying to recreate the actions of the JQuery UI tabs. You can eliminate all but the inital tabs creation and the click event. The only part of the other JS you have posted that might actually do anything is the fadeIn() As for styling, don't assign and remove the active class, use the .ui-tabs-active class. Style the background color of the li, not the a or your a style will override the li.ui-tabs-active and they will stay grey even on hover/selection. See example here:
See fiddle demo here: http://jsfiddle.net/webchemist/Dpg2W/
Also you have some CSS errors:
#tabs li a.active{
background:#fbfbfb;
border:px solid #fff;
border-right:px; /*no numeric value given for # of pixels*/
color:#333;
}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
margin:34px px; /*no numeric value given for # of pixels in 2nd value*/
}
.tabContents{
padding:px /*no numeric value given for # of pixels*/
}
.tabContents h1{
font:normal 24px/1.1em Georgia, "Times New Roman", Times, serif;
padding:0 0 px;
width:auto;
/*no closing brace for .tabContents h1*/
</style>

I need help getting the JQuery Function slideDown to work in my code

I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>

Categories