I am totally clueless, i don't know why this happening. I am trying to display the right section of HTML after page load. By default i set display:none; in CSS. And want to show the page during page load.
This is how i tried:
var f_e = $('#nav > li > a').first();
f_e.addClass('active');
f_e.next().slideToggle();
// Right section that make the div display block
$('#unigem-quickstart').show();
But its not working, here is the full code with jsfiddle
It's because you have two different instances of an ID. (This being unigem-quickstart) so it's only calling the first one (which is an a tag). You need to name it something else. (There should be only 1 ID of something!)
$('div#unigem-quickstart').show();
You used the id twice
Related
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I have an array set up that has something added to the array every time to drop a word into a bucket on the page. I'm trying to show and hide certain div's depending on how many objects are in the array.
My code is:
if (test > 5){
$(".moving").hide();
$("#done").show();
}
This works perfectly except when the page first loads. The div with ID #done is still showing when the page first loads and then goes away when the array gets it's first object. (Array starts empty)
In your css just add #done{display: none;} That way the div will not show when page first loads.
Or use #done{visibility: hidden;} if you just want the div not to be visible.
If you don't have access to the HTML code you could hide it in ready function :
$(function(){
$("#done").hide();
//Or
$("#done").css("display","none");
//The rest of code
});
Hope this helps.
Use : #done{display:none;} or #done{opacity:0;}
Later in code, whenever you want to display it, you may use js/css to change display to block or opacity to 1.
The following function will hide done div and show moving div when page
is ready after complete page is rendered:
$(document).ready(function(){
$("#done").hide();
$(".moving").show();
});
Similarly you can use load method in to run a function on page load. but be aware load method is executed before complete page
is rendered
In your current code, you can add the following at the very beginning of ready function,
$('#done').hide();
or
$('#done').css('visibility','hidden');
Just as a little pre-info, I'm running a Volusion e-commerce site that has internal page HTML locked down, so I am unable to add any ID's or classes to internal page elements.
The default HTML provided by Volusion puts a table out of order for my design on my category pages. I have a bit of script that targets that table on my product category pages, and moves it. The problem is that the script is run after the page is loaded, causing a "jumping" effect as the table is moved via jquery.
The simple solution would be to hide the table first via css, and then have the jquery show the element after it has been moved, however, I am unaware of how to accomplish this.
Here is the moving script. It first detects if the user is on a category page via a URL check. It then finds the first child table inside the #content_area element, and moves it.
<script type='text/javascript'>
$(function () {
if (location.pathname.indexOf("-s/") != -1) {
var table_to_move = $("#content_area").find("table").first();
$("#content_area").find("form").before(table_to_move).show();
$('#jmenuhide').insertBefore('.refinement_price_section');
}
else {
}
});
</script>
I have tried targeting the element via css, and hiding it, and then re-showing it after the script has run. However, since I can only reference it through css selectors, and not an ID or class, the page will end up hiding the wrong table, as the table orders change when the script is run.
Anyone have any idea how I can smooth out this table movement? Thanks!
You can view this script in action at: http://www.yandasmusic.com/Folk-Instruments-s/1821.htm
I'm trying to put a piece of jquery together to show a hidden div and at the same time, refresh the parent div so that the javascript can amend and display the new height.
This is what i have so far but after some research have found than to refresh a div you have to use ajax and was wondering if anyone could lend a hand.
var $r = jQuery.noConflict();
$r(document).ready(function() {
$r('#open').click(function () {
$r('#expandable-2').show('slow');
$r(this).load(location.href + '.panel > *');
});
$r('#close').click(function () {
$r('#expandable-2').hide('1000');
$r(this).load(location.href + '.panel > *');
});
});
So far I have this,
a link with the id's of open and close
once clicked they give the css property of display block and display none to a div expandable-2
the part I'm stuck on is the refreshing of the parent div .panel in order to show the displayed div correctly.
Reason being is that I'm currently using the CodaSlider script in my page and the height is dynamically brought in depending on how much content is in the container. Now in order for the new content to be displayed when clicked open, the container needs to be refreshed thus showing the new content with a new height.
Hope that makes sense but any help would be awesome.
to "refresh" a div you just need to do:
document.getElementById("myDiv").innerHTML = new_content;
new_content may be the html returned by your ajax call but you definitely DON'T need an ajax call to "refresh" a div.
You can change html of a div with html method of jQuery.
$r(".content-div").html("Hello world");
If you want to load an html from server with ajax, you should use load function as below:
$r(".content-div").load("ajax/users.html");
There is a clear mess with your code. Just a few tips:
If your parent div contains #expandable-2, then you won't be able to do the ajax call and show the animation at once, because the ajax call is gonna destroy the #expandable-2 element while it is appearing/disappearing.
The proper way of loading external code through ajax into a div is:
$r('.panel').load('/path/to/url');
This will load the response of '/path/to/url' into the '.panel' div. Make sure that '/path/to/url' only returns the new content of the div, otherwise you cannot use $r('.panel').load, but an indirect approach must be used instead (i.e.: $r.ajax)
I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.
In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/
Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?