I'm looking for a Javascript workaround that'll allow me to indicate the current page on the main menu(basically, the menu button for that page will be a different colour to the rest of the menu buttons). The main menu is in CSS but isn't bringing up the required image for the "current menu item" indicator automatically and no one knows why.
View 1 Replies
I'm designing a web page, Having a banner on top, then a search option following it.There is a menu item list below it on to the left.And the content of the links of those menu item should get loaded in the center of the page.And a footer having some copyright info.All these are in div tags. The problem is when i click on any menu item it should be loaded in the center div tag.Ive tried using Iframes but there is a scrollbar coming only in that area of center div tag.I don't wan't this to happen.Based on the size of the html page to be loaded the div tag size should increase, and so the whole page.Have tried using Ajax but not working.
View 1 Replies View RelatedI'm designing a web page, Having a banner on top, then a search option following it.
There is a menu item list below it on to the left.And the content of the links of those menu item should get loaded in the center of the page.And a footer having some copyright info.All these are in div tags.
The problem is when i click on any menu item it should be loaded in the center div tag.Ive tried using Iframes but there is a scrollbar coming only in that area of center div tag.I don't wan't this to happen.Based on the size of the html page to be loaded the div tag size should increase, and so the whole page.Have tried using Ajax but not working.
But I am doing both front and backend for a project and having an issue with a jquery slider which, when inserted, is breaking 2 other js scripts in the page, including my main menu.Can anyone point me to a resource that outlines best practices for working with more than one js library and/or raw js .I'm doing some tests on the order of the scripts right now, but wanted to put a feeler out there to see if someone has dealt with this before.
View 1 Replies View RelatedIn the menu in this page I have four different methods (you can see them in the <script> tag on the pages) of indicating the current page in a menu. I downloaded these from various web pages after Googling "jQuery highlight current page".None of the methods works. Is there something wrong with my selectors? Can anyone see why none of them are working?
View 4 Replies View RelatedHow do I display or hide a Javascript menu based on the current url in a php page?I want to specify when a java menu appears on a page based on the current url - does anyone have a script for the vars and conditional statements to make this happen - it would be something like this in natural language:
<javascript>
if currenturl = http://jemmakidd.com/categories.php
then displaymenu
[code]....
I've created a nav bar for this site - [URL].. I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. How would you suggest I edit or add to my code so it keeps the second image active if it is the active page? In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1.jpg" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "http://web11.3essentials.com/~cp27358/wp-content/themes/origin/images/menu1a.jpg" ;
[Code]...
I've created a nav bar for this site - [URL] - I'm using javascript to handle the image rollover which is working just fine. However I want to add to this so that the current page will stay with the second or rollover image. Do I edit or add to my code so it keeps the second image active if it is the active page?
In my script file this is what I'm using for an image:
menu1buttonup = new Image();
menu1buttonup.src = "[URL]" ;
menu1buttondown = new Image() ;
menu1buttondown.src = "[URL]" ;
Followed by....
function buttondown( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}} function buttonup ( buttonname ){
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}}
And this is what my list items look like:
<a href="<?php echo home_url(); ?>/?page_id=7" onmouseover="buttondown('menu1button')"
onmouseout="buttonup('menu1button')"><img src="<?php bloginfo('template_url'); ?>/images/menu1.jpg" name="menu1button" /></a>
It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item.I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state.
View 1 Replies View RelatedI'm trying to create two bookmarklets:
1. Take the current URL of the page and open a new window with a URL based on the current page. Some examples (I use "->" to mean "this URL turns into that URL"):I plan to use these bookmarklets in sequence, first pressing 1 to log into the CMS, then pressing 2 to edit the current page.
I have a mega menu that when the main menu items is hovered over the mega menu the div is displayed. I want to keep the div from being shown off the right of the browser screen. I have the following that determines the amount a div is off the right of the browser:
Code:
function keepMenuLeft(){
var div_width = $("li.hovering div").width();
[code]....
I'm having trouble making a main vertical navigation with two drop down menus and wondering if anyone can please help as I'm not great with javascript! I have a main menu and two drop down menus. At the moment I get them to open fine when the main link is clicked and close when it is clicked again. But I want dropdownmenu1 to close when opening dropdownmenu2 so that they are not open at the same time!
This is my javascript:
<script type="text/javascript">
function showElement(layer){
var planLayer = document.getElementById(layer);
if(planLayer.style.display=="none"){
[Code].....
when a user clicks on a link, a new window opens. what I want to do is that if the user closes that popup but click on that same link again, the window should open..
Code:
<script language="javascript">
var winOpen = "";
[code]....
I have an animated main menu that uses slideDown() to show the sub-menus, triggered by the .hover() event on the parent. There's another animation on the home page that uses jCarousel to rotate the items in a <ul> every three seconds. Whenever a hover event on a parent menu item coincides with the animation trying to load a new frame, the menu freezes until the other animation is loaded. As common as animated menus are these days, I can't believe I'm the only one who has ever come up against this problem.What I want is for the menu animation to take precedence no matter what, but I understand that JS has no "priority" feature (not being multi-threaded)
View 3 Replies View RelatedI have a problem with my menu. I am trying to add and remove classes when clicking on the main menu links. For instance when on load, the 'Home' is the current tab clicked, but when I click on 'Contact Me' I would like the class current to be removed from 'Home' and added to
'Contact Me' instead.</div>
<div> </div>
<div>The code im using is the one below.</div>[code]....
My goal right now is to make a two-part navigation bar where you don't have to reload the whole site, when you click on a link. The navigation bar consists of two <ul> lists with <li> float:left and <a> display:block, so I basically have two lines. It's probably easier to understand if you see it for yourself: jsfiddle (had to change the css style, because I use .less but it works)
When you load the page it's just like that, you have your main category (A,B,C,D,...) and the sub-category (A1,A2,A3,...). What I want: If you click on B, the sub category changes to B1,B2,.... If you click on a sub category the site loads the requested page (with ajax = best solution?!)
My thoughts
At first I thought about just changing the name and href attribute of the second list, but the main categories have different amounts of sub categories, so I would need to add or remove <li>'s. Then I thought about using .load() but I somehow screwed up (of course) and the loaded <ul> doesn't have any css style (wrong order?) and I can't see anything. (with a loaded test.html site containing only the word "test" it worked) Is ajax "overkill" as a solution?
CodeIgniter and the URL
I use CodeIgniter (a PHP framework) for the website and URLs like this: www.example.com/maincategory/subcategory (e.g. example.com/A/A3) That's no problem at all, if I don't use any javascript and reload the whole site every time. But is it possible to change the URL with jQuery when the user clicks through the navigation bar? You click on B, the URL changes to example.com/B all the subcategories change to B1,B2,...When you click on B2 the URL changes to example.com/B/B2 and the site loads the requested page (I guess with ajax, so the navigation stays the same?!)
Minor problem: when you load the site, click on B, then B3 for example, you would get the url example.com/B/B3. If you now save this link, close the site and reopen it with the link, CodeIgniter would load the right site and everything, but the navigation would show A1,A2,.. in the sub category.
Hover vs click
Almost every page where I saw this kind of menu they used hover to change the sub category. But I thought click would be better, so you don't have to avoid touching B,C,D,.. if you want to go from A to A9 for example. Only downside is that you have to click before you see the sub categories.
Summary
A two part navigation menu you can use without reloading, changing URLs (when possible) and probably ajax to load the actual content.
I want that when i click on a other main item that the other will close. Now it still keep open and then ill get a long menu list. How do i do it , i dont have js experience.
[Code]...
On my webpage, I dynamically create an iFrame when a button is pressed, then load a html page from within my own domain into the iframe, based on what html page is loaded into a variable. My question is, can I dynamically change the font family of the loaded html page from the javascript of the main page? My code to create the iframe is:
function setSubTxt(){
var par = document.getElementById('parentDiv');
par.innerHTML = '<iframe src="'+subTxt+'" style="width: 375px; position: fixed; height: 365px; left: 400px; top: 145px; border=none;" name="subIframe" frameBorder=0></iframe>';
frames['subIframe'].window.location=subTxt;
document.subIframe.document.body.style.fontFamily = "Arial";
[Code]....
the variable "subTxt" has the url of the html page to be loaded (always on the same domain). The code: document.subIframe.document.body.style.fontFamily = "Arial"; was my attempt to dynamically change the font, but it didn't work. Also, it should be noted that there is no font family set in the html pages which would override this.
I am trying to incorporate two javascript files (using jQuery) and they are creating a conflict.If the main js is on the page part of the page does not work. If I do not include it my menu and some related features do not work correctly.One code is long so here is the link to it: *I removed Link* (this is the main code for the menu etc)The other js is:
$(document).ready(function(){
Engine.Initialize();
if( !$('body').hasClass('index') && !$('body').hasClass('homepage') ) {[code]....
Our company own a lot of domains and want to put a short page of copy on each address along with keywords before redirecting the user to our main site. I have been able to get the page to load the main site after the desired time using this code in the head...
<META HTTP-EQUIV="refresh" CONTENT="40;URL=http://webaddress.com/">
That works perfectly, I am now trying to display a countdown timer from 40 seconds down to 0, and on 0 redirect the user. Saying something like "You will be redirected in XX seconds". Is there anyway of doing this? I've been searching google for the answers with no luck and can only seem to find timers that countdown to a set date.
When I load a page into an existing page I think the div's are not nested properly therefore the javascript is not working correctly. What's happening is ALL the div's on the second page are showing. I just need the first div to show then when you click on the <li> element the other div shoes. It works fine when the page loaded by istself. Here is my code:MAIN
PAGE:<
div
id
[code]....
I have built an expandable menu that displays some categories and subcategories. The menu is populated from a MySQL DB and I'm using PHP to configure the data for the Javascript menu. All of this works correctly.
There are 2 options when using the menu.
1. Click the arrow icon next to the category option. This opens the subcategories for that category while remaining on the current page.
2. Click the category title (text link). This brings you to the category page.
When a user clicks the category title to go to the category page, I want the subcategories for that category to be open when they get there.
Everything seems to be working correctly, until I get to the line to open the subcategory.
I am new to JavaScript. I am currently developing a simple CMS in PHP & MySQL. Most of work is already finished, bu now I have to tweak some functionalities in increase user experience. One of it is folding menu (tree menu). I am generating it in PHP and currently I'm using simple JavaScript to expand/collapse submenus (folders). Idea is simple - when an expandable list item (<li>) is clicked (onmouseclick) a simple JS funtion is executed that display a child list (<ul>) and in this way I am building a simple tree menu.
The function is following:
Code:
function showHide(msg_id)
{
var element = document.getElementById(msg_id);
element.style.display = element.style.display=='block' ? 'none' : 'block';
}
The problem is that when I click an list item (that leads to certain article) in a submenu, whole page is reloaded and all previously opened submenus collapse. I would like to have expanded elements that are leading to the last one that I clicked. How can I achieve it? Can you provide me some links to tutorials? Or maybe giva a hint how to tweak my function?
I'm looking for some Javascript that displays the current year and the next 10 years afterwards as options in a select menu, and that auto updates as the years pass.
View 2 Replies View Relatedadding a counter to my script.
So i have 2 files,
A index.php(I deleted some stuff for sake of privacy)
[Code]....
I've got a text area with a vertical scrolldown bar. Using the following JS code the text area scrolls down as I'd expect:
document.getElementById(ID GOES HERE).scrollIntoView(true);
But the main are also scrolls down - is there any way to stop the main page scrolling down too?
