So I want to show random divs, and I found this stackoverflow solution here: Showing random divs using Jquery
And the correct answer uses this code: http://jsfiddle.net/nick_craver/RJMhT/
So I want to do the above, but for the life of me, I don't know how.
I thought it would be as simple as
<html>
<head>
<script type="text/javascript">
var divs = $("div.Image").get().sort(function() {
return Math.round(Math.random())-0.5; //random so we get the right +/- combo
}).slice(0,4)
$(divs).appendTo(divs[0].parentNode).show();
</script>
<style type="text/css">
div.Image {
display: none;
}
</style>
</head>
<body>
<div class="Image"><img src="/image1.jpg">1</div>
<div class="Image"><img src="/image2.jpg">2</div>
<div class="Image"><img src="/image3.jpg">3</div>
<div class="Image"><img src="/image4.jpg">4</div>
<div class="Image"><img src="/image5.jpg">5</div>
<div class="Image"><img src="/image6.jpg">6</div>
<div class="Image"><img src="/image7.jpg">7</div>
</body>
</html>
But apparently not, as nothing shows up on my screen. Can somebody help me? Should be really really easy for someone who knows the least bit about javascript I think.
Thank ya!
You are running the script before the HTML code for the body of the page has been parsed, so the elements doesn't exist yet.
Put your code in the ready event of the page:
$(document).ready(function(){
// your Javascript code goes here
});
Also you are missing the include of the jQuery library, as Conner showed.
You need to import the jQuery library.
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
to your <head> tags before your javascript code.
Related
I am attempting to get jQuery waypoints to work and I am doing a very basic example and it won't display the window alert that I am attempting to show when scrolled to. I was watching a video of this and I had exactly what the guy had, so I am not sure why it isn't working for me.
Any ideas of why this not initiating?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
</head>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<section>
<img src="images/big-smile-face.png" class="dipper" alt="">
</section>
<script src="js/waypoints.js"></script> <!-- js/waypoints.js file -->
Javascript - js/waypoints.js file
$(document ).ready(function(){
var $dipper = $('.dipper');
$dipper.waypoint(function () {
alert('waypoint!');
});
});
What browser are you using? There might be some issue there. It seems to be working fine for me and I am not getting any errors.
I recently started learning some jQuery. I want to fade in a div but nothing is happening. Can someone please tell me what is wrong?
Everthing is linked so that's not the problem:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="inc/content_animate.js"></script>
content_animate is my .js file.
This is in it:
$(document).ready(function(){
$('.content').fadeIn('fast');
});
I want to fade in my .content div. Which is this:
<div class="content">
<img src="img/design.svg">
<h2>Design</h2>
<p>I don't only program my websites. I also design my websites myself.</p>
<a class="btn-content" href="projects.php">Learn more</a>
</div>
What did I do wrong? Thanks in advance to everyone looking into this!
your code is fine, but if you dont hide your div initially, theres nothing to fade in, because its already showing.
$(document).ready(function() {
$('.content').fadeIn('slow');
})
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="img/design.svg">
<h2>Design</h2>
<p>I don't only program my websites. I also design my websites myself.</p>
<a class="btn-content" href="projects.php">Learn more</a>
</div>
$(".content").hide().fadeIn('fast')
I'm quite new to this all, and I just need to have an image slider/transition full width for the top of my page..
only problem is; I've never used or did anything with javascript code writing.
I've been looking for about 5 hours now and tried every thing possible but I just can't make anything work.
Most of the time it's just images stacking up under each other or next to each other.
I'm using dreamweaver CC because I have a deadline for the website on thursday and it's easier.
As you may have read I'm completely useless when it comes to javascript..
Also, I'm quite confused about jquery.. (Yes, I've looked everywhere but I can't understand anything of it, no mather what I do.. it doesn't work)
Please help?
<html>
<head>
<title>Slider</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
setInterval(function()
{
var activeimg = $('#slider').find('img:visible:first');
(activeimg.next('img:hidden').parent().attr("id") == 'slider') ?
activeimg.next('img:hidden').toggle("slow") :
$('#slider').find('img:hidden:first').show("slow");
activeimg.toggle("slow");
}, 3000);
});
</script>
</head>
<body>
<div id="slider">
<img src="img/1.png">
<img src="img/2.png" style="display:none;">
<img src="img/3.png" style="display:none;">
</div>
</body>
</html>
I have this simple html snippet
<div id="bigtext" style="width: 300px">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
with no CSS enabled so it doesn't interfere with anything. Then I have a simple Javascript file with this code:
$(document).ready(function() {
$("#bigtext").bigtext();
});
Also in my html I load bigtext.js. I have confirmed that both Javascript files are being loaded through an alert, but the text does not resize to fit. I have also tried this using FitText and that did not work either. I have copied the BigText example exactly from the website but no luck. Any ideas?
Had a look at the bigtext demo on GitHub and added a couple of lines as below and it seems to be working...
<body>
<div id="bigtext">
<div>The elusive</div>
<div>BIGTEXT</div>
<div>plugin exclusively</div>
<div>captured on film</div>
</div>
<script src="jquery-1.7.1.min.js"></script>
<script src="bigtext.js"></script>
<script>
var bt = BigText.noConflict(true);
$.fn.bt = bt.jQueryMethod;
$('#bigtext').bt();
</script>
</body>
The BigText plugin expects an ID to work.
<html>
<head>
<script type="text/javascript">
// jquery and javascript functions
</script>
</head>
<body>
<fancy-jquery-ajaxy-html-section>
</fancy-jquery-ajaxy-html-section>
<noscript>
sorry you came to the wrong place - this site is all jquery/ajaxy stuff.
</noscript>
</body>
</html>
I tried surrounding <fancy-jquery-ajaxy-html> with a <script type="text/javascript"></script> but then nothing from that section is displayed even for users with javascript enabled.
But what I want to do is hide that <fancy-jquery-ajax-html> section only if the user doesn't have javascript enabled.
It contains content that is useless to someone without javascript turned on, so it shouldn't be shown at all.
A user with javascript disabled should only see a message saying that the page can't be viewed without javascript.
Is there a way do that?
The easiest way is to hide the section with CSS (e.g. display:none), then show it through Javascript.
EDIT: just a little example
<div>Everyone sees this div</div>
<div id="mydiv" class="hidden">You see this div only with JS enabled</div>
<script type="text/javascript">
$("#mydiv").removeClass("hidden");
</script>
<noscript>
<div>You will see this div only with JS disabled</div>
</noscript>
And, of course, in your CSS:
.hidden
{
display: none;
}
You could hide your fancy section using css:
<div id="fancy_jquery_ajax" style="display: none;">
</div>
then you could use use JavaScript to display the element:
$("#fancy_jquery_ajax").css("display", "block");
I hope that's right, I actually don't use jQuery that much. :S
Another approach would be to generate that HTML using JavaScript, so it can't appear unless JavaScript is running.
What I did is to have my javascript hide the nojsdiv and show maindiv. This way, if you don't have javascript the message shows up.
<body onload="allowlogin()">
<div id="maindiv" style="visibility: hidden;">
...
</div>
<div id="nojsdiv">
The training system requires javascript to be enabled.
</div>
</body>
I prefer to add a class of .js to html tags as soon as jQuery has loaded. This allows my to write css rules that apply only when the user has javascript enabled/disabled. This keeps your show and hide code out of our JS and lets CSS do its job and style the page
Here's how I would approach your problem:
<html>
<head>
<style type="text/css">
.js #fancy_jquery_ajax {display: none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('js');
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready
});
</script>
</head>
<body>
<div id = "fancy_jquery_ajax"></div>
<noscript><!-- stuff to say if use had javascript disabled --></noscript>
</body>
</html>
It's important to note that we want to add the class of .js as soon as jQuery has loaded and not add it in our document.ready handler. Otherwise we'd be back to square one.