There are a lot of posts on this site with the same title, but none of them helped with my problem. I'm trying to do a simple thing with jQuery, and it's not doing anything, which leads me to believe that jQuery isn't even properly linked. But I'm doing exactly what I've always done. It's supposed to change the unordered list in this div to change its background color to orange. It doesn't change at all, though. I even tried to use a console.log to see if even that would work. It didn't. Can someone check this out?
My code :
<script src="jquery-1.12.0.js">
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
<div id="contentleft">
<h3>My List Is Awesome</h3>
<ul>
<li>Full Sail</li>
<li>CNN</li>
<li>YouTube</li>
<li>No link here.</li>
</ul>
</div>
You can't put code inside <script> tag that has an src.
Use two script tags
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
Don't try to use one <script> tag with both a src attribute and internal contents. Break it into two tags, like this:
<script src="jquery-1.12.0.js"></script>
<script>
$(document).ready(function() {
console.log("Why isn't this working?")
$("#contentleft ul").css("background-color", "#FFA500");
});
</script>
A <script> with both a src and internal contents will give unpredictable results. You might want to read this post for more information.
Related
I have a pretty good understanding of HTML & CSS, but I am having trouble with the Tag Page feature of tumblr. On my blog for every tagpage, I have a heading being grabbed from the name of the tag. I do not want to change the URL. I want to change the heading on the page, but that heading is being grabbed from the {tag}. The tag is vld. Instead of the page saying vld, I want it to say "All Designs". Pretty much overriding the {tag} for just the /tagged/vld tagpage. The TagPage code is:
{block:TagPage}
<div class="tagtitle">{tag}s</div>
{/block:TagPage}
For /tagged/vld, I want the heading on the page to be "All Designs" instead of "vld". how can I make this change for this specific tagpage?
I have tried
{block:TagPage}
<div class="tag" id="{Tag}">All Designs</div>
{/block:TagPage}
My code being:
{block:TagPage}
<div class="tagtitle" id="vld">All Designs</h2>
{/block:TagPage}
I have also tried
<script>
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
}
});
</script>
But neither of the methods have worked - everything is still showing the tag as the heading. You can see my blog at vintagelovedesigns.tumblr.com
OK, I have a test version working here using one of your themes:
https://madox-test.tumblr.com/tagged/vld
Your switch statement should be throwing an error as you have an additional closing bracket.
The script should look like this:
<script type="text/javascript">
$(document).ready(function(){ // if you are using jquery it is a good idea
// to wrap code in a document ready function
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
};
});
</script>
Hope this helps.
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
I'm creating a resource database that has a scrolling container on the side. Essentially, when you click a thumbnail within the container, it will load the contents of a div which will fade in and display content for that category. Each div tag looks something like this:
<div>
<h2>Category1</h2>
<p><a style="float:right" class="a_demo_four" href="/Resources/file1.pdf" target="_blank">
Download
</a>File Desc</p>
<hr/>
</div>
And will load as such:
Essentially, I want to be able to display the same exact content when I open another category on this page. I have several different categories, and want to be able to pull the code from say Category1, Category2, and so on and so forth so I can display all of them in a "View All" tab. I've attempted to use jQuery's load function as seen below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
<h1>This is why I rule</h1>
</body>
</html>
to load the content from the original div into the view all category, but nothing shows up. Unfortunately, I have very limited knowledge with Javascript/jQuery so I'm having difficulty being able to use the same content in a different div without just copying and pasting the code over. This would also pose problems in the future when I am adding files and have to edit the code twice if I did so.
Thank you in advance!
You can keep your content in a variable like this:
var content = '';
$(document).ready(function(){
//load first in a div
$('#includedContent').load('b.html', function(result){
content = result;
//from here on, you know you have b.html data in the variable content
//and you can use it elsewhere like this
$('#anotherDivId').html(content);
});
});
If you call your code within document ready function will work.
Try,
$(document).ready(function(){
$("#includedContent").load("b.html");
});
However you will probably need to keep it somewhere as visualex suggested in order to add the content in multiple places as you require.
This is a working jsfiddle,
http://jsfiddle.net/c5SAH/show/
it loads content from
http://jsfiddle.net/gfgE8/show/
I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.
UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});
If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.
Try this :
http://jsfiddle.net/sXJa6/6/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script src="js/jquery.localscroll.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/script.js"></script>
script.js:
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
html:
<div id="container">
<div id="menu">
<nav>
<ul>
<li>HOME</li>
<li>GIGS</li>
<li>TOP10</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div id="content"><!-- content -->
<div id="home">home</div>
<div id="gigs">gigs</div>
<div id="top10">top10</div>
<div id="contact">contact</div>
</div><!-- end of content -->
i don't understand what is wrong....help me! thnx
The problem is partially in your HTML formatting, and there might be some CSS errors on your side as well (can't tell from here.)
First of all, it's a bad idea to use an html element like <nav>, (i have no idea what it is, this is the first time i've ever seen it and it might cause problems with jQuery)
Second, your content div must have a fixed size, and overflow:scroll as CSS markup.
To see a working example, check out This JsFiddle i made for you
I remember using this plugin at some point and I think you need to specify a target
$(document).ready(function() {
$('#menu').localScroll({
target:'#content'
});
});
Keep your menu wrapper as is and change the js conde to:
$(document).ready(function()
{
$('#menu').localScroll({duration:800});
}
);
And I don't think you need the content ID in content wrapper. That might help.
I had exactly the same problem.
Chrome was driving me nuts in why it was not working, but the funny thing was is that I've used this plugin before and it worked in all browsers!!!
So I looked at every single bit of HTML, CSS, JS, to try and figure out what was different.
See below my anchor.
<a class="anchor" name="myanchor"></a>
My CSS on the class 'anchor' was blank. As soon as I added CSS 'position: relative' to the anchor element, Bingo! it worked in Chrome.
Hope this helps someone!
This worked for me: I was including the file twice.
In our header:
<script type="text/javascript" src="/js/lib/jquery.scrollTo-min.js"></script>
And in our footer:
<script type="text/javascript" src="/scripts/jquery.scrollTo-1.4.2-min.js"></script>
Removing the second include solved the problem.
This happened due to merging of a new website design onto our existing one.
I've just wrote a blog post about localscroll at chrome: http://lukaszkups.pl/blog/localscroll-chrome-problem/
You should use:
$("html,body").localScroll({duration:800});
Duration is optional of course, but at least set html/body as a target ;)