JQuery :: Initial Content On Show / Hide Setup?
Dec 16, 2010
Is there a way to edit the following show hide set up to allow for initial div to be open. So for example instead of nothing coming up, #video1 would initially load and then when you click on li links it would load a new div in as coded replacing the initial video for example, if you clicked video 2 or 3 thumbnails?
HTML=
<ul id="brightCove">
<li onclick="javascript:doShowHide('video1');">
<a href="javascript://">video 1 thumbnail here</a>
</li>
<li onclick="javascript:doShowHide('video2');">
<a href="javascript://">video 2 thumbnail here</a>
</ul><div class=showhide" id="video1">
content for video 1 </div>
<div class="showhide" id="video2">
content for video 2 </div>
JS
$(document).ready(function() {
// Add ID of New Category in line below separated by Commas
$("#video1,#video2").hide();
});
doShowHide = function(idstr) {
$("div.showhide:visible").each(function () {
if (this.id != idstr) $(this).hide("fast");
});
$("div.showhide#"+idstr).show("fast");
}
View 1 Replies
ADVERTISEMENT
Jul 3, 2009
Cannot get jQuery to work (unless I access [url])
Is this permissible, or do I have to download jquery.js to my server? If not, I have other questions:
- My hosting service does doesn't have gzip compression enabled --what file do I need to install on my server if I don't have GZIP available?
- How can I extract that file (jquery.js?) from jquery-1.3.2.js.txt? (looked for GZipper, but from what I can see that's Mac s/w and I'm running windows)
View 7 Replies
View Related
Oct 10, 2010
I am trying to learn jquery. my example below is to show and hide content in a group divthe code works but i want to know if this is best practice to write what i did. Is there better way to do it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
> <head
[code]....
View 2 Replies
View Related
May 15, 2011
And also add a plus & minus button to it, so when it is hidden, the button is plus, and when it is showned the button is minus.[URL]I want it to be animated with .hide() and .show()
View 2 Replies
View Related
Dec 8, 2011
So i have this full paged HTML/CSS side and i wanna imploment some Jquery to hide and show my Contact informations.But, my problem is that, i have a FULL side filled with Div's and other goodies. My problem is, how do i get make a link, which is inside a Div to be a special class so that only when you click that "class" it shows / hides the content?The Div i have it something like this;[code]
View 2 Replies
View Related
Nov 28, 2011
I am having some real trouble figuring out how I can hide and show divs one at a time, a bit like an accordian. Currently, I have several buttons, which open and close a div containing a ul menu. What I am trying to achieve is to only have one div showing at a time.
So for instance, when the page loads no divs are displayed, just the buttons. You click a button a div slides out. you click another button this div closes and another opens. I am new to jQuery, but working hard to understand and learn. So far I have the below for each button (div).
[Code]...
View 2 Replies
View Related
Apr 4, 2010
I am using the following code to show and hide several dynamic content areas on a page. It works like an accordion where when you open one it closes the other.
Is there a way I could change it to so it doesn't automatically close one when another is open? Meaning I would like to have multiple content areas expanded at once. I would also still want to be able to manual close them if I want.
Attachments
script.txt
Size : 378 Bytes
Download : 436
View 1 Replies
View Related
Sep 2, 2010
Is it possible with jQuery to show a part of the content again which is already hide?
<!DOCTYPE html>
<html>
<head>
<style>
[Code].....
When I click on #hidr, #div1 is hide() like it should, but when I click on #showr, #div2 doesn't show up, probably because it is hide in div1.
Is there a workarround?
View 2 Replies
View Related
Oct 11, 2011
how to write a script where when a link is clicked in the left nav column, it will display text in the right main column. So, when you first arrive to the page, nothing will appear in the main portion of the site. Content only appears after clicking on a link. When you click on another link, the previous content is hidden, and the new text is displayed. Here's what I have so far:
HTML
<div class="container">
<div class="nav">
<ul id="menu">
[Code]...
View 4 Replies
View Related
Aug 27, 2010
I have the following show/hide div function made with jQuery:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code].....
It toggles perfectly, but I would like to make to which appears to overlap the underlaying content div below. Right now it just pushes down the content div when sliding out.
View 2 Replies
View Related
Jul 6, 2009
I want to use a toggle to hide and show some content but it isnt working
html code:
JS code:
But this code dont works correct, notiv that i want to use more then one box.
View 5 Replies
View Related
Jun 8, 2011
I have a list item, where only some of the items are linking to a quote from the client. The quotes are in another list, where each list item has an id corresponding to the client link. I want to show the client quote when you roll over the client anchor link. Currently when I mouseover it's showing nothing.
Here's my HTML
<!--client list-->
<ul id="clientList">
<li>no quote Client /</li>
<li><a href="#client1">Client 1</a> /</li>
<li>no quote Client /</li>
<li><a href="#client2">Client 2</a> /</li>
</ul>
<!--client testimonials--> .....
At the moment, when I mouseover one of the anchored client links, the content disappears, so it's not showing the correct client quote <li>.
$(document).ready(function() {
// see if the requested page url contains an anchor '#'
var hash = window.location.hash.substring(1);
// if no anchor, show the default blockqoute
if(!hash){
var id = 'default';
}else{
var id = hash;
} .....
View 2 Replies
View Related
Nov 18, 2009
First let me admit that my Javascript coding skills are lacking. I know enough to implement and slightly modify existing code, but not enough to write a complex script from scratch.
With that said, I'm trying to implement a navigation system like the left vertical links on this page: [URL]
I looked into using JQuery tabs, but the ul would be too long for a horizontal list. Ultimately, I'm looking to mimic the way this navigation behaves in the way it hides/shows/maintains the content based on the mouseover function. I also looked into using JS to hide/show layers, but it looks like I need something to hide/show divs with HTML content within the normal text flow.
View 6 Replies
View Related
Dec 4, 2011
It is not possible for me to make the content1,2,3,4 fadeIn instead of just showing. When i type 'slow' here content disapear:
[Code]....
View 2 Replies
View Related
Jun 12, 2011
how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
Here's the code I need to change.
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
[Code]....
drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one.
View 2 Replies
View Related
May 6, 2011
I would like to show or hide a header element (e.g. <h3></h3>) based up a div tag that either contains content or not. The content is dynamically added or shown, but the header element isn't, which results in having the header element shown with no content below it many times.
Here's an example:
View 2 Replies
View Related
Jun 12, 2011
how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in?
Here's the code I need to change.
Code JavaScript:
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
[Code]....
drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one.
View 2 Replies
View Related
Sep 22, 2009
I have just setup jeditable for a text area and this works fine however when I activate / click on the text area to bring up the editor, the content is filled with br tags (example below). How to convert the br tags into tags before it is displayed?
comment 001<br><br>
<br><br>
comment 002<br><br>
<br><br>
comment 003<br>
Comment 4
JQuery code
$(".editable_textarea").editable("update-comment.php", {
indicator : '<img src="/intranet/media/icons/indicator.gif">',
type : 'textarea',
submitdata: { _method: "put" },
select : true,
submit : 'OK',
width : 400,
rows : 3,
cancel : 'cancel',
cssclass : "editable",
id : 'comm_id',
name : 'comm_details'
});
View 1 Replies
View Related
Sep 12, 2011
I am trying to hide/show table when hide/show button is pressed
Problem: The code works fine when I remove 'slow' from line 10. But with 'slow' in line 10 content of toggleButton doesnt change from Hide to Show when pressed.
Code:
View 1 Replies
View Related
Aug 9, 2009
how can I show / hide the content of sub divs based on whether the input is != or = and be able to repeat this.I tried to hide the sub divs using , onclick if bla bla = '' ;document.getElementById('hideme').innerHTML = ''; which works, but once I try to enter a new input, then nothing happens, even if the content of the sub divs is = input.
View 2 Replies
View Related
Nov 26, 2009
I'm pretty bad with Javascript, but I need to hide or show a snippet of text (could be inside a div without problems) based on the selection of a dropdown menu (<select>). If they choose anything with the word "Series" on it, I need to show the snippet. If they choose anything without "Series" on it, then the snippet needs to disappear. I should mention the snippet is part of a form, just a checkbox but that shouldn't be a problem I don't think.
View 24 Replies
View Related
Feb 19, 2011
This is the Javascript function that I use to hide/show DIV content. I use it everywhere without problems:
[Code]...
However, I get strange behavior when the above DIV is located within an AJAX response. My main page loads another HTML page into a div, and within THAT div is the "div6" above.
[Code]...
View 3 Replies
View Related
Mar 4, 2010
Bascially I have a main page with all the code setup to slide whatever content is in the div 'sub_content'. As below: [URL] Contained in the my "external pages" are different slide contents that I want inputting into the 'sub_content' div as below: [URL] If you click 'Test Link 2' you will see it fade out but it's then loading in the main page again? I think it is this line of code found in submenu.js where the problem lies? var myXHR = new Ajax( objLink.href + '&blnAjax=1', { method: 'get', evalScripts: true, autoCancel: true, onSuccess: showSubPage } ).request();
View 13 Replies
View Related
Feb 10, 2006
Below code creates a tabbed navigation. Works well. But how do I set it up so Tab 1 shows when the page is loaded?
Code:
<script type="text/javascript">
function initShowHide() {
if (document.getElementById && document.getElementsByTagName && document.createTextNode) {
hide();
var toggle = document.getElementById('toggle');
var as = toggle.getElementsByTagName('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
show(this);
return false;
}
}
}
}
function show(s) {
hide();
var id = s.href.match(/#(w.+)/)[1];
document.getElementById(id).style.display = 'block'
}
function hide() {
var toggleable = document.getElementById('toggleable').getElementsByTagName('div');
for (var i = 0; i < toggleable.length; i++) {
toggleable[i].style.display = 'none'
}
}
window.onload = initShowHide;
</script>
<style type="text/css">
#tabsB {
width:100%;
font-size:93%;
line-height:normal;
}
#tabsB ul {
margin:0;
padding:2px 10px 1px 0px;
list-style:none;
}
#tabsB li {
display:inline;
margin:0;
padding:0;
}
#tabsB a {
float:left;
background:url("tableftB.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsB a span {
float:left;
display:block;
background:url("tabrightB.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsB a span {float:none;}
/* End IE5-Mac hack */
#tabsB a:hover span {
color:#000;
}
#tabsB a:hover {
background-position:0% -42px;
}
#tabsB a:hover span {
background-position:100% -42px;
}
</style>
</head>
<body>
<table width="50%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<tr>
<td><div id="tabsB">
<div align="left">
<ul id=toggle>
<li><a href="#1"><span>1 </span></a></li>
<li><a href="#2"><span>2</span></a></li>
<li><a href="#3"><span>3</span></a></li>
</ul>
</div>
</div></td>
</tr>
<tr>
<td bgcolor="#F7F7F7" style="border-bottom:1px solid #CCCCCC; border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;">
<div id="toggleable">
<div id="1">Tab 2</div>
<div id="2">Tab 2</div>
<div id="3">Tab 3</div>
</div></td>
</tr>
</table>
View 1 Replies
View Related
Feb 21, 2010
I am trying to hide tables when a page initially loads and only display them when a button is pressed. When the page loads the tables show and I need then to be hidden. What am I doing wrong? I am new to this.
Here is the code that I have so far.
<Script = text/javascript>
function show_hide(tblid, show) {
if (tbl = document.getElementById(tblid)) {
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');
[Code]...
View 1 Replies
View Related
Jul 18, 2010
I have one long text field in HTML to feed text as input in my page. the entered text will be shown as output text after some operations.In this context, i need to display few text(say 200 chars) only and i need to provide READMORE link/button which would show me the complete content of that text field. I need to achieve this shortly!
View 2 Replies
View Related