Show/Reveal Content - javascript

I'm just starting out with Javascript. I cannot figure out for the life of my why a basic function won't work. I'm trying to make so when you click the button, the "World" disappears.
I'm not really seeing a logical reason as to why this shouldn't work; I'm basically copying from w3schools introductory JS tutorials.
I thought it was an issue with the new "hidden" attributed in html5, but I tried the usual "style="display: none;"" route too and it didn't work.
Here is the JSFiddle: http://jsfiddle.net/6qDap/966/
Thanks in advance for helping me with such a simple question!
HTML:
<button type="button" id="my_button" onclick="hide()">Hello</button>
<div id="my_div">World</div>
JS:
function hide()
{
document.getElementById('my_div').setAttribute('hidden');
}

I just realized your code should work correctly. You should try putting the script in the head to make sure it loads before the DOM.
Ignore my previous answer:
I think you're looking for display: none
Here's a jsfiddle to show an example

The attribute probably needs to be set to a value, try:
document.getElementById('my_div').setAttribute('hidden', 'hidden');
Or alternatively, set the style attribute.
document.getElementById('my_div').setAttribute('style', 'visibility: hidden;');

To make it work on jsfiddle you should load the javascript on
No wrap - in - <head> or
No wrap - in - <body>
function revealPhotos() {
document.getElementById("div_2008").style.display = "none";
}
Here is your updated fiddle

Related

Tooltips not working

OK, I am baffled on how to get Bootstrap 3 Tooltip working.
Bootstrap Tooltip "instructions"
http://getbootstrap.com/javascript/#tooltips
Says to trigger using:
$('#example').tooltip(options)
then HTML to write
Hover over me
No matter what I do, I cannot seem to get it working. There is no ID named example in their example, and adding said ID does not work (I wrap the script in a script tag and have added it before and after the anchor).
But, after looking around on Google, I found the following code, which when added makes the Tooltip work as it should.
$(function () { $("[data-toggle='tooltip']").tooltip(); });
So, my question is, How the hell do I get it working with the provided Bootstrap code! What am I missing? They really need to work on their instructions. This should not take this long to figure out when it should be simple!
I was able to recreate this in a fiddle. Check the console on your browser if you are getting javascript errors. Looking at the code you have provided though it hits me that you might be mixing two things together. The options need to be defined in your javascript code and not in HTML, like this:
$(document).ready(function() {
var option = {
title: "example",
placement: "bottom"
};
$("#example").tooltip(option);
});
Well, this is about how to read the document of bootstrap.
$('#example').tooltip(options)
just presents how to use the jquery method, and it is not right for the following html:
Hover over me
The method must be called in order to active the tooltips plugin. So, in order to make the html working with the plugin, you need to do two steps:
add an id into the html, say,
Hover over me
call the jquery method,
$('#tips').tooltip(options)

using screenx/screeny and their ilk, not exactly working

my jsfiddle is here:
http://jsfiddle.net/diabetesjones/o9o9bs0h/3/
now, this is an example coming straight out of Javascript and JQuery by Jon Duckett, but it is not working for me.
i also thought that maybe his example was wrong, and instead of
el.addEventListener('mousemove', showPosition, false);
i should put
el.addEventListener('mousemove', function(event) { showPosition(event);});
but that didnt work either...been fiddling with this for a few hours now!
any clarification would be great, at this point i think its a typo. :p
thanks!!
there was some mistakes :
one : you were using : document.getElementById('body') and the body didnt have and id="body"
attribute.
two : you were using sx.value.... and you had to use sx.innerHMTL... becouse theya re DIV tags.
three : the code was excuting beofre the body was loaded thus not attahcing the event handler to it.
here is the FIDDLE its all fixed and tested
look for your self :)

Replacing paragraph tag contents with a random word from javascript

When a user enters the page I would like a div to be in the center with a heading, a quote underneath that is randomly picked from a list and a button to enter the site. This is all well and good but I cannot seem to get the button to fade in the main site and fade out the landing div. Here is a jsfiddle to try and help explain things more.
JSFIDDLE
As you will probably be able to tell, I'm not that great with JavaScript or jquery and what I have done so far is from learning bits and pieces and surfing the web through code examples
I do not see why it will not work as I had a play around in jsfiddle with a simplified version of what I want to do and it worked.
Simplified Version
Below code is simplified version (It wouldn't let me post without adding code?)
HTML
<div class="landingDiv">
<h1>LANDING DIV</h1>
<button id="showMain">Enter Site</button>
</div>
<div class="main">
<h1>Main Site</h1>
</div>
JQUERY
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
CSS
.main {
display: none;
opactiy: 0;
}
Thanks in advanced.
Steve.
The first jQuery example threw an error:
$ is not defined
meaning jQuery is not defined/included. Which it wasn't. But in the second jsFiddle, you included jQuery.
You'll notice that on the left hand side of jsfiddle, you'll see that under the "Framewords & Extensions" heading that you can include a Framewordk - so, include jQuery!
Here is the updated fiddle with jQuery included: http://jsfiddle.net/6cGHF/1/
As you move forward in your JavaScript development, it is always a good idea to check your browsers developer tools for errors when something unexpected is happening. It always helps you, and when you ask questions on StackOverflow, providing these errors help us! :)
The shortcut for developer tools in Chrome is F12 - you can see a little red circle with an X in it if you have errors - click it for more info. But developer tools are also available in other major browsers (except IE8 and below).
Edit:
Wrap your click() event function in a $(document).ready()
$(document).ready(function() {
$("#showMain").click(function () {
$(".main").fadeIn(1000);
$(".landingDiv").fadeOut(1000);
});
});
What was happening was that your HTML file is read from top to bottom. So it would have reached your click function before the #showMain element had been read. So, jQuery couldn't find it.
The reason this wasn't a problem in jsFiddle was because all the JavaScript code was wrapped in an "onLoad" function (which is, admittedly, a little different to $(document).ready()) but it solved this problem for you by executing your JavaScript after everything had already been loaded. You can see that on the left hand side in the fiddle I linked above, you'll find a dropdown with "onLoad" selected. In it, you can also choose "OnDomready" (which would be equivalent to $(document).ready())
In summary:
DON'T use $(document).ready() in jsFiddle. You don't need it.
DO use $(document).ready() around javascript that relies on the fact that the DOM is ready (ie. "all of your content is visible to your JavaScript").
The problem in your fiddle is you have not added jQuery so when you try and reference it with '$', a javascript error is thrown. Simply add in the reference to a jQuery library and your fiddle works to fade out the button when clicked.
Your problems:
1) Add jQuery library to your fiddle.
2) Remove opacity:0; from .main in your CSS. The display:none; is sufficient.
3) Use this to fade out/in the elements:
$("#showMain").click(function () {
$(".landingDiv").fadeOut(1000, function () {
$(".main").fadeIn(1000);
})
});

Replacing image source on mouse hover

Trying to have a different image show up on a mouseover event. Using the following JavaScript:
$('div.row-fluid').hover(function() {
$(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image1.jpg');
}, function() {
$(this).find('img').attr('src','http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg');
});​
And the following HTML:
<div class="span27 offset1" style="margin-top: -3.2em">
<div class="searchbutton"><img src='http://leandrovieira.com/projects/jquery/lightbox/photos/image2.jpg''></div>
</div>
But no luck. What's the problem? Fiddle: http://jsfiddle.net/mpmqm/2/
Add row-fluid as a class name to your container. http://jsfiddle.net/mpmqm/3/
http://jsfiddle.net/mpmqm/4/ - your selectors are off.
Seriously, you need to learn how to debug JavaScript and jQuery.
With both Firefox and Chrome, you can open up a console and type (note: this is not the same $ as in your code!)
$('div.row-fluid')
> null
At this point you should realize that the selector did not work.
$('.row-fluid')
> null
Still null - oh, yes, there is no .row-fluid element.
Alternatively, you can enrich your code with debug statements:
console.log($('.row-fluid'))
should report that it has a length of 0.
I did the job for another guy here on stackoverflow in pure javascript. The only difference from your case was that he wanted image src change on mouse click. Pls. see if that helps you in correcting your code:
Toggle image src attribute using Javascript

jQuery - Very simple issue i cant sort out (class's and an alert)

I think this may be my most embarrassing question to date.
Why does this not work? Ive been staring at this for around half an hour now and im starting to get desperate
http://jsfiddle.net/FU6Jb/
My HTML
<a class="closedialog" href="#">Close</a>
My JavaScript
$(document).ready(function() {
$("a.closedialog").click(function() {
alert("Test")
});
});
You forgot to add the jQuery library, at the left panel.
This fiddle does work: http://jsfiddle.net/FU6Jb/1/
More explanation on JSFiddle. The dropdown box above the Framework indicates where the code should be inserted. Using your current setup, your JavaScript code will be wrapped in a onload event. I recommend to use the nowrap (head) option.

Categories

Resources