as you can see the items hide/show on click using a simple jQuery toggle. My question is, is it possible to link to my website with one section already expanded from an external source. I hope this question makes sense. Iv tried and failed by linking to the div id using #link but cant get that to work.
View 2 RepliesI am doing an internship at a company and am working on an existing site. The Company wants the expanding menu to stay expanded when you click a link to go to another page while navigating. I am very new to Javascript, CSS, and html and could really use some insight or code example.
// JavaScript Document
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
[code]....
I have working code to Show/Hide content when clicked on link of particular section:
var showText="Show content FAQ1";
var hideText="Hide content FAQ1";
1. How to do link on particular Title and show this description like Description1, Description2 etc.
2. How to open some sections in advance inside Javascript?
Working code is the following using Jquery jqueryV1.4.4:
PHP 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" xml:lang="en" lang="en">[code]....
How do I put this onclick function code...
into the head of my page so I can call it from several similarly situated links?
How to make an image map link to another page AND open a specific accordion section?I guess I need a script that knows which area of the image map was clicked and not only navigate to page 2 but opens the section via slide toggle I need it too.Here is the the page with the image map (although image map version not upload yet so I have what will be uploaded below)[URL] ...and the page I need to navigate to based on the area of the image map clicked and also slidetoggling the div I need it [URL] Here is the image map:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img src="/Img/Illustrations/kicktalkv2.jpg"" alt="Kick Talk" usemap="#kicktalk_map" />
[code]....
I have a javascript where I check to see what the last 4 characters are of the URL I am on and if they are html I want to set a:
View 1 Replies View RelatedHaving HEAD section like that:
<head>
<title>Foo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link
title="linkObject"
rel="Alternate Appendix"
type="text/plain"
href="data.txt"
charset="iso-8859-1"
hreflang="en-US">
</head>
what would be the most realible way to get "linkObject" reference?
var roof = document.getElementsByTagName('HEAD')[0];
// ?
Anyone know how I can change the color of a text link on a page that doesn't load a new page, but rather stays on the same page?The nav links already use an onClick to present content below it that changes depending on what link in the nav I select. In other words, there's already two things going on -- links take you to content on the same page using a JS onClick.What I want to add to that is when you click on the link, it changes style, like turns bold or changes color. So then the user knows that not only have they selected new content, but the link they selected stands out as well.
View 1 Replies View RelatedI'm grabbing an XML file with jQuery like this:
$
document
.ready
[code]....
What happens if you do the following? - That is deep copy a jQuery selector.
[Code]...
I'm concerned whether the myObj.selector object will deep copy the whole of jQuery as part of the process. My initial tests did not show any obvious speed hit, but it is rather a basic test right now.
I want to change the onkeyup attribute of a id="duration" textbox which is buried deep inside the DOM tree.
View 3 Replies View RelatedI'm almost done customizing the Superfish jQuery menu to fit my web site theme. I have all of the menu hover and submenu hover styles in place, but I'm having a problem with the color of the top-level menu item's font when the submenu is expanded. The active top menu item's background matches the hover color, but when I hover overa submenu item, the font color reverts back to the original (non-hovered) color. How do I get the top level menu item's color to match its hover color when the submenu is expanded?
The relevant portions of my CSS are as follows:
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color:#8C1C39;
}.sf-menu a.sfHover {
color:#FFFFFF;
}.sf-menu li {
background:transparent;
}.sf-menu li li {
background:#FFFFFF;
}.sf-menu li li li {
background:#9AAEDB;
}.sf-menu li:hover, .sf-menu li a:hover {
color: #FFFFFF;
background:#00207B;outline:0;
}.sf-menu a:focus, .sf-menu a:active,
.sf-menu li li a:hover, .sf-menu li.sfHover {
background:#8C1C39;
color: #FFFFFF;
outline:0;
}
Attachments
TopHover.jpg
Size : 10.86 KB
Download : 505
SubHover.jpg
Size : 9.33 KB
Download : 510
When the left column first loads the vertical scrollbar displays correctly.
The vertical scrollbar is aligned up against the right border of the first column of the table which you can see by looking at the first image, and comparing it to the second.
Once I click on a folder in order to expand its contents, the vertical scrollbar introduces a gap of about 20 pixels as shown in the circle.
I looked at the css tag for the "classes" folder using firebug, and it showed {class ="directory collapsed", class= "directory expanded"} prior to and after expanding the contents of the folder.
I did a global regex search, within the project hierarchy, for (collapsed|expanded) and could not find any css that showed any margin-right for expanded, nor could I find any css at all related to "directory (collapsed|expanded)".
The only thing I found was that jqueryFileTree.js contained a function bindTree(t) with some code that toggled (collapsed|expanded):
Does anybody have a clue what is causing the gap once I click on a folder, and how to fix the problem?
Even if close the folder once the gap is there, I can't get rid of it unless I reload the page.
One option that occurred to me is to loop through all nodes in the div and count the words in the nodeValue if it's a text node, or otherwise loop through the element's sub-nodes if it has them. You could do this recursively and therefore find all text nodes within the DIV and its sub-elements.The problem is this doesn't cover everything. Inputs and textareas have a value, not a nodeValue. You will want to ignore any "script" elements and perhaps others. Of course you can set up a list of exceptions and modify the algorithm a bit to allow for them.An attempt at the approach described so far is shown here: [URL]But what about select elements? Do you want the value or do you want the text inside the selected option? What if they're multi-select lists? etc.
View 3 Replies View RelatedI have a setup where I have a function, calling a function, calling a function. All functions do what they're supposed to do, but they don't return to the first function when all is done, so it doesn't display an alert that it's supposed to.
For those that don't want to look through tons of code and think they might know what I'm doing wrong, here's the "coles notes" version. code...
Im creating a javascript content expander and would like to know how to create it so it changed the image from an down arrows to open the box, and a down arrow to close the box.Here is my current code.
Code:
<script type="text/javascript">
//var persistmenu="yes"
var persisttype="sitewide"
[code].....
I want the <div class="rightnews"> thing to change from an up arrow to a down arrow.Here are the icons im using.for the box to contract:
for the box to expand.
I have pairs of terms and short definitions in a table. I want to display a longer definition in a box below the terms table when the term is clicked on. The box needs to disappear if clicked on. [code]...
View 6 Replies View RelatedI'm trying to gather some information on any techniques or even plans to change the fundamental nature of the way the internet and http requests work. From both an advertising, and a usability perspective, the concept of a page load is becoming obsolete. Users expect instant results, and advertisers are becoming more concerned with time on site than they are with page views. You don't need a full page view to have an ad impression anyway. That said, there are plenty of techniques to make it so that your page can load new information without reloading the whole page. The problem is there doesn't seem to be any good way of making it so that AJAX calls can be linked to.
My site has a somewhat weak implementation of this: [URL]
Notice that it links you to the "APM" tab of that page, and if you click the other tabs they're all loaded via AJAX? You'll probably notice that initially it loaded the "Overview" tab, and after the page loaded, it then switched you to the APM tab. That's wonky behavior, and I don't like it, but there's not much that can be done about it as far as I know. The problem is, as far as I know, this deep linking technique becomes increasingly difficult to implement the more variations you have on a page's data.
For example, if you have pagination, then you need to make your deep linking code support all those variations as well. So my question is, is there a way to easily, FULLY AJAX a website, complete with the ability to deep link to any page state, without any wonky behavior (e.g. loading the "base page" first, and then after it's loaded, switching the data)? If not, has anyone heard of any plans to fundamentally rewrite the nature of HTML and HTTP requests so that web pages are no longer based on page loads, but state changes?
I have two objects that I am trying to merge together using $.extend().
As long as I only use objects 1 level deep everything merges correctly.
objOne = {
face: "book",
captain: "crunch"
}
[Code]....
This might be more easily explained just by showing you the code. Basically, this is a function within a large class dealing with moving table rows around, and works in Chrome but no where else. Chrome understands "event.clientY" in this context while other browsers throw "event is undefined". Y is a correctly set global indicating the clientY of where the original click occurred.
Code:
set_bgcolor = function (t, r) {
var tr, i;
var currentY = pointer.y = event.clientY;
tr = tables[t].rows[r];
[Code]....
So, I'm just trying to get event.clientY to work for all browsers in this case, where an event handler might not easily be passed to the function.
Details:
I'm using third-party code to move rows of a table around. [URL]
It's a large piece of drag and drop code, but I'm trying to edit it so that at a point near the code's completion, it says whether the initial mouse click was above or below where the cursor has been dragged to. "Why" is a long story, but suffice it to say that there are functional differences when dragging the row up rather than down (up puts it above the hovered over row, while below puts in under that row), and I want to place a border line in there so that users know exactly where the row is going.
So you probably don't have to look at the whole code (which I can provide if you'd like), but my basic question is, how do I get the function to know where the current mouse pointer is this many levels deep in code. I could try to pass the event through all the layers, but I'm not good enough at javascript to make that work, and I'm not sure it would. Isn't the event the keypress (and not the current position?).
I want to display the question and answer in the following way. When
the user moves his mouse to one question, the question will be expanded
to show detailed answer of that question.
For example,
1. What is UML?
2 How to implement it?
3 What is the advantage of UML?
When i move the mouse to the Question 1, the question will be expaned
and have a detailed answer of it; if i don't move to there, the
outline won't expand.
I search for a long time, but have no clue.
What functions should be use???
If slideToggle()'s parameters were expanded to include a separate callback for sliding up and sliding down. Or for backwards compatibility, perhaps include an optional boolean parameter in the callback to more easily discern between a slideUp and slideDown operation.
View 1 Replies View Relatedlook at the following website:
[URL]
I'm using the toggle effect to create the expandable content here. However, when I click Refresh, you see a flash of the expanded content before it quickly collapses again. Is there any way to get rid of this?
Is the UI section of the site down? I have a few websites that link to it and they're all taking forever to load, seemingly hanging when "waiting for ui.jquery.com..."
View 3 Replies View RelatedIn IE7 and IE8, trying to do this fails:
var $tagsection = $("<section class='links'></section>");
$tagsection.html("<p>test</p>"); //or
$tagsection.append("<p>test</p>");
But changing the section to a div, works:
[Code]....
I created a Expand/Hide toggle for my About Me section. I used the following codes below.How do I make it to default the About Me section to Hide first instead of Expand?ttached is an example.Attached is all the codes for the page.
<div class="app-box" id="about-me">
<div class="app-box-menu toggle">
<a class="app-box-menu-icon" href="javascript: void(0)" onclick="joms.apps.toggle('#about-
[code]....