This is my first post here. I'm not well versed in JavaScript, so I'm not sure how to do all the following things: (1) set up a horizontal menu with (2) + and - images as bullet points, such that clicking on the bullet points (3) changes + to - and vice versa while (4) a single-level drop down menu makes text disappear and appear.
It should look like this:
---------------------------------------------
[+] Option A [+] Option B
[code]....
i am making video blogging website and i need someone to make Hide or show menu, for example: When someone click on:
Season 1 (it should show)
Episode 1
Episode 2
Episode 3... (and when someone click on episode it should show text (usually <iframe... ))
ty in advance and i can share 5$ on paypal if you make it right and easy to use
I make a menu and in one of it's item I want to show a sub menu under it when the user mouse is over it, I use onmouseover and onmouseout for this and I make the visibility of the sub menu hidden and when the mouse become over the item it's visibility become visible. the problem I faced is that when the mouse become out of the item of the main menu the sub menu disappear and I couldn't click on or over it.
[Code]...
I am currently in a Javascript class and it is completely confusing me. I have a website that I am trying to make the tabs at the top all work. I already did the setTab function but I am not even sure if that is right. I have found lots of other websites that have good advice but they want me to do things way different than the book. Basically they are leaning me away from Javascript. The whole point of the class. I am including the original files as well as what I have so far. The page-1 is most of assignment and the Homework Description is the part that was cut off.
View 12 Replies View RelatedThe below is a menu, which is hidden until clicked, and can be hidden by clicking it again.
<!-- This goes in the HEAD of the html file -->
<script language="javascript">
<!--
function showIt() {
if (document.layers) {document.layers["layer1"].visibility='hide'}
else {document.all["layer1"].style.visibility='hidden'}
}
function hideIt() {
if (document.layers) {document.layers["layer1"].visibility='show'}
else {document.all["layer1"].style.visibility='visible'}
}
// -->
</script>
<style>
input {border-style: ridge;}
a:hover {text-decoration: underline}
</style>
</head>
<body>
<span id="layer" style="position:absolute; top:17; left:20; width:250; height:90; visibility:show">
<script>
<!-- author: bfsog@hotmail.com use it as you wish //-->
<!--
function buttonText(type) {
if (type=="Hide Menu ") {document.menu.button.value="Menu";}
else {document.menu.button.value="Hide Menu ";}
showIt();
if (document.menu.button.value=="Hide Menu ") {hideIt();}
}
// -->
<!-- change the value of 'top' and 'left' in the layers properties below to place the menu
in the desired position matching the placement of the button -->
</script>
<form name="menu">
<input type="button" name="button" onClick="buttonText(value);" value="Show Menu" />
</form>
</span>
<div id="layer1" style="position:absolute; top:40; left:20; width:250; height:90; visibility:hidden">
<table bgcolor="yellow" border="1" cellpadding="2" cellspacing="0">
<tr><td><a href="http://www.google.com" style="text-decoration: none"><font face="arial" size="1"><b>google</b></font></a></td></tr>
<tr><td><a href="http://www.hotmail.com" style="text-decoration: none"><font face="arial" size="1"><b>hotmail</b></font></a></td></tr>
</table>
</div>
</body>
I have a nav menu with lists within lists (3 deep), with pattern as follows:
[Code]...
When a parent link is clicked it reveals the sub-list. What I would like to do is hide currently visible lists when another is revealed. I've tried to use .siblings but it dunt werk (or, at least, I can't make it happen!)
The amount of information I have in the footer for most of my pages has, over time, grown enough that the footer now takes up too much space vertically. Rather than completely removing the information, I would like to strip down each section of it into a single, descriptive word, and have more info about each section shown when you click on the specific word.
Essentially, it would be a mini-menu with extended information available for each menu item. I have seen show/hide javascripts that do similar things, but nothing precisely along the lines of what I am looking for, and I haven't been able to tweak any of the existing ones as I am pretty clueless about javascript beyond very basic modifications.
The main problem for me has been how to accomplish the layout I'd like for the footer:
Section1 ~ Section 2 ~ Section 3 ~ Section 4
Extended Text for Section #
The show/hide scripts in menu form that I have seen all show the extended text under each menu item, rather than having a designated area for the it regardless of which menu item was selected. But perhaps there's something out there that is more along the lines of what I need?
I am working on my portfolio site and I've come to a bit of a wall. I have a main navigation which, when clicked animates a div containing my content to be visible. I have this working fine but now I want to have external content loaded into this containing div when different navigation items are clicked, which I also have working, but I cannot get these to work together. First off, if the div is not shown I want the appropriate content to be loaded then the div to animate, and if the div is showing, I want it to hide, swap the content then animate. I am sure its just a case of structuring my code properly but I just cant seem to get it right.
Show the div
$(document).ready //content animate show (
function() {
$('.navigation a').click (
function() {
$('.content').stop().animate ({
marginTop : "0px" },{
easing : "easeOutQuint",
duration : 2000
})});})
Hide the div
$(document).ready //content animate hide (
function() {
$('#hide').click (
function() {
$('.content').stop().animate({
marginTop : "200px" },{
easing : "easeInQuint",
duration : 1500
})});})
And finally swap the content:
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('.navigation a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php .content';
$('.content').load(toLoad)
}});
$('.navigation a').click(function() {
var toLoad = $(this).attr('href')+' .content';
$('.content').fadeOut('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
function loadContent() {
$('.content').load(toLoad,'',showNewContent())
} function showNewContent() {
$('.content').fadeIn('fast');
} return false;
});
});
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'm struggling around to show submenu on mouseover of menu-div. I found a solution to show each children of one menuitem, but I wont to show the whole submenu-strukture of all menuitems. Here is what I've done till now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns ="[URL]">
<head>
<meta
http-equiv ="Content-Type"
content ="text/html; charset=utf-8" .....
So when I hover over li.first I will get all submenu-items of the first heading! Is it possible to mouseover the div#navi or the ul#nav to get shown all submenu-items from every menuheading?
I tried something like this, but of course it doesn't workjQuery(document).ready(function(){
jQuery(".first ul").hide();
jQuery(".#nav").hover(function () {
jQuery(this).children(".first ul").toggle("slow");
});
});
Basically, I have written an application that runs a report based on a certain amount of parameters, one of which being date. So, the date selection is a <select></select> dropdown menu and it has the usual in it, today, yesterday, this week, last week etc. The problem is I need it to have a 'Custom' selection to run reports for custom dates. When 'Custom' is selected in the dropdown menu, two text boxes appear underneath with YYYY-MM-DD watermarked in them. I have assembled enough code from around the web to get this to work and it works fine, the problem I have is that when the user clicks off the 'Custom' option and on to a different one, I need the textboxes to disappear again.
Here is the code I am using:
<script type="text/javascript">
function showhide(divid){
thediv = document.getElementById(divid);
if(thediv.style.display== 'none' ){
thediv.style.display='block'
}else{
thediv.style.display='none'
}} .....
How do i get a dropdown menu to hide/show a textbox and a label control ? in a asp.net page
Here is my code:
Trying to get the divs to switch style properties when selected form select menu
<script type="text/javascript">
function showstuff(element){
if(document.getElementById(element).style.display = 'block')
[code].....
I am trying to truncate some text within a 'span' in order to create a 'more/less' button to show/hide the additional. I effectively want to turn this:
[Code]...
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 RelatedI am having a few issues with a client who requires me to code their menu in JavaScript.
Here is the HTML:
Code:
<ul id="navigation">
<li class="firstElement"><a href="#">User</a>
<ul>
<li><a href="#">Manage my profile</a></li>
[Code]....
Basically i need the menu to be collapsed to the first level initially. So only the User, Admin and Company User links are visible.
When these 1st level menu items are clicked the 2nd level sub menus need to be displayed when navigated to the 1st level index page and so on for the third level menus.
I need to be able to remember the location as well so the menu stays open on the correct page.
The annoying thing is that if i was allowed to do this in Coldfusion this would only take me a little while but i don't know much JavaScript therefore am a bit stuck. I am not allowed to use libraries either such as JQuery, MooTools
Another challenge is to style the 'active' link locations.
When you are at the first level the class of the anchor needs to be selected_bg.
When in a sub of said first level the class of that selected anchor needs to be selected_bg and the first level needs to change to selected.
For the third level both the above stays the same but then the third level takes the class of selectorThird when active.
Need a bit of expert help with some thing i am trying to achive but cant find any code on line. all i want to do is to have a list of items in a div box on the left of the screen and when i click on one of them it shows a div box with the related text on the right side of screen in the second div box and hides any previouse showing divs on the right.
View 3 Replies View RelatedIt 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 have some wordpress code which generates a menu with links to the pages created in the admin area.
[Code]...
The id of active is on the currently selected menu item. In the above code the home page. How can I get the subnav to show only if the main menu item which contains a subnav is active? The rest of the time I want the subnav hidden. I have found the effect I want on another site [URK]. If you select advanced treatments a sub menu appears. If you select say jobs then the subnav for advanced treatments disappears.
[URL]
at center of page there is a heading "Recently Posted Job" i want that functionality to make for my project i.e. changing of text or heading after a particular interval of time.
I've got this function that shows and hides a TR with-in my TABLE, but the text never changes when you click it,I would like default to be hidden, and if clicked, change text to Show and show TR. Code:
View 2 Replies View RelatedI 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:
I can I take a code like this:
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
[Code]....
But make it so you see "Show" before you click, then change the text to "Hide" once you click the link?
Apologies if this question has been asked a million times. I am fairly new to this game, have got my head around html & css and now it's time to add a little interactivity... BUT i've hit my first brick wall. I am setting up a (big) panel of text which i wish to present in a more reasonable fashion by hiding the content and only showing the headers. Got the Hide:Show function working ok as shown below, but I am stuck on my next requirement...
Basically The hidden text will show and hide when told by clicking on the relevant header - but i wish to hide the text in a visible area when clicking on a new header.
[Code]....
im trying to do a single html page with multiple checkboxes to hide/show text when checked/unchecked. I'm really bad at html but so far I have got this: The problem I have is I dont know how to add more checkboxes.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>101st</title>
[Code]....
I have several input text boxes. The default value for the boxes is the description of the contents of the box. When the user clicks on the box to type, the default values disappear so they can begin typing. My problem is what if the user forgets what the contents of the box is suppose to be. I am looking for a solution where if the input box is empty, and the user deselects it, the original default value will appear.
Code:
<input type="text" value="Event Name" onfocus="value=''" />