I am implementing some tabs using jquery and have run into a problem where a google map on one of the tabs is not displaying. I read that a solution is to "Use the off-left technique for hiding inactive tab panels"i.e
Code:
.ui-tabs .ui-tabs-hide {
position: absolute;
left: -10000px;
}
how the hide method is currently hiding the tab contents. i.e how does the hide() method hide the tabbed content?
I found an issue with using embed code and jquery's show()/hide () method. I am using embed code inside of a div. So it looks something like this:
<div id="test">
<embed>
whatever here
</embed>
</div>
Now on that I want a user to be able to click a button to show/hide the content. So I create a function like this:
<script type="text/javascript">
function showEmbed(){
if($("#test").show()){
$("#test").hide();
} else {
$("#test").show();
}}
</script>
I then binded that to just a basic text link:
<a href="javascript:void(0);" onclick="showEmbed();">show/hide</a>
Now that works fine as far as showing/hiding the embed code. However, there is one issue with this. When I click the link it reloads the data. I do not want it to reload the data. Say for instance there is a video playing in there. If you click the link it will stop the video
and when you click it again to show it will start again. How to get it not to reload the data.
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]....
im looking for a way to check a list for equal content and then hide this li.
[Code]...
I have a simple hide and fadeIn. When you rollover a word it will reveal the definition. The problem I am having is if you move the mouse around quickly from one word to the next word sometimes it gets hung up and a definition will not hide. The result gives this hanging defintion and whatever the other definition the mouse is rolledover.
Here is the code I'm using:
There are about 70 words in a box with the definition being reveals on the right hand side. Is there a way of making sure there is always only one definition being shown?
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 RelatedI have recently started exploring the world of jQuery and it looks incredibley rich and powerful! I am stuck on something, though. When I dynamically create a div
var divTag = document.createElement("div");
//Set the parameters
divTag.id = "divMaster";
//Create it and immediately hide it!
[Code].....
This is probably really obvious, but I cannot figure out why? Perhaps jQuery is looking for elements already in the original HTML, and my div tag was added to the DOM after loading the original elements?
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 RelatedI 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]...
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
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?
how to properly evaluate a value in a document onLoad. Caveat - I am working on this via a CMS (BusinessObjects), so don't have 100% control over what's passed in to the page.
HTML:
<div id="home_alert"><hr />
<h2>MEMBER ALERT!</h2>
<p><a href="/member-home.htm">LOG IN to read new items!</a></p>
</div>
[Code]....
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");
}
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]...
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.
Im making a website in which I want to "embed" another website (not mine) - implesignup.se - through which i've created an event. The problem is that I want to hide the footer of that page, maybe the header to if its possible, but since the height of the other page varies throughout the steps in the "buying-process" I can't set a fixed height...Is it possible to fix this problem using jquery and how do I do that?So, something like this is what i want: autoheight - x pixels from the top - x pixels from the bottom
View 4 Replies View RelatedI 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.
Major JQuery noob here. I'm working on a directory for a client's site and for some reason, in Firefox, the page is running really long with extra whitespace at the bottom where each tabbed div should end.[URL]...
View 1 Replies View RelatedI have 2 separate things going on my homepage using jQuery. One is a menu calling the following jQuery:
The other is a tabbed content box feature that calls the following jQuery:
Everything works with great with the menu until I call jquery.min.js then the tabbed content box works great and the jquery for the menu is broken. If I'm not mistaken, I cant use jquery no conflict because that only separates jquery from mootools or something like that. So, what is the solution when jquery interferes with itself?
have 4 tabs which are loaded via AJAX, 3 of them from external html files. Within these tabs I have a number of images in a gallery.When the page is loaded initially, the Fancybox works fine, but when I click on another tab, ie pull in external content, and click on an image it loads in another window.Seems like the new content pulled isnt hooked up to the Fancybox trigger..in right direction.The code is detailed below, I need some kind of call on the AJAX to trigger FB???
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[code]....
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;
} .....
which works once the page hasn't been loaded using.load $(".toggle_cat_container").hide(); How do I adapt it to work when the page is loaded with .load? I am familiar with needing to use .live on click functions.
i.e.
$("a[id^='mydiv']").click(function(e) {
needing to be changed to:
$("a[id^='mydiv]").live('click', function(e) {
My problem is that $(".toggle_cat_container").hide(); would trigger when the document was ready but when its loaded it won't trigger. What adaptation do I need? I suspect something similar to the below - just not getting it right $(".toggle_cat_container").live('onLoad', function(e) {
On my website: [URL], I have a scrolling logo script that uses Mootools and a tabbed AJAX content script using jQuery. I can't get the two to play well, because as you can see, the tabbed content at the bottom is not working correctly. I've tried the jQuery.noConflict(); code and wrapping the jQuery in:
(function($) { /* some code that uses $ */ })(jQuery)
... But to no avail.
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.
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]....
I created a forum topic earlier this week looking for a tutorial on creating tabs which, onlclick would load content into a div.
I was referred to dynamicdrives tabbed content script.
Their are 2 problems with this script, that i cannot use it.
1. It isnt XHTML compliant. They are using an attribute called "theme=''" to change the color of the div tab. So im wondering what to do about this, b/c the w3c validator is throwing an error when i use this.
2. I cant figure out a way to keep the content div white, and only change the color of the tabs. The way a tab script should work is the tabs should be able to have their own color, while the content div remains white, so that text is readable. You can only have the tab the same color as the section your main content has to be on, and i dont find this acceptable.