I am trying to learn a little bit of java script, an any help would be greatly appreciated as I am pretty new to this world and just learning. I have tried looking up and down this site and have tried several suggestions from other users but none really seem to answer my issue.
I have this bit of code:
Im simply trying to get it to slowly hide a div box when the x is clicked. the button shows up and can be clicked but nothing happens. can someone help me out and show me what I'm doing wrong?
<div id="daily_deal">
<button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
<div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>
function myFunction($) {
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
})(jQuery);
You only need this bit:
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
And then you can remove the onclick from the button:
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
What it was doing is binding to the document ready event when you clicked the button, but as this has already happened the code that binds the click event is never run.
Use
<button id="close_x" onclick="toggleWidget();">
and
function toggleWidget() {
$("#widget").slideToggle("slow");
}
You can remove the $(document).ready() row. That is, remove line 2 and 6 from your function. It's implying that you want to do something when page has loaded, which will not occur at the same time as this function is called.
You only need this code:
$(document).ready(function() {
$("#close_x").on("click", function () {
$("#widget").slideToggle("slow");
});
});
the onclick="myFunction($)" is not neccessary anymore.
No need to call function in onclick, so your resultant html should be like this.
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
And your script should be
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
you can try this function for hide and show div tag:
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
Like HtmL Code:
See Full Description
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. Hide</p></div>
Related
I'm trying to display a slideshow like the one shown here:- (http://www.w3schools.com/w3css/w3css_slideshow.asp) at the top when someone clicks "About Us, but I can't even get the onclick portion to work.
So far, I have:-
document.querySelector("p").addEventListener("click", function(){
document.querySelector("div").style.display = "block";
});
#here{
display: none;
}
<div id="here">Slideshow</div>
<p>About Us</p>
But it's not working for some reason. Can someone tell me what's wrong with the click function? I tried giving each of them individual IDs and I'm not sure what else to try. Thanks in advance for any help you guys can provide.
It should works, the position of your script is important make sure your script is defined after your DOM. Or you can add your script inside a DOMContentLoadedevent.
document.addEventListener("DOMContentLoaded", function(event) {
//script here
});
document.querySelector("p").addEventListener("click", function(){
document.querySelector("div").style.display = "block";
});
#here{display: none;}
<div id="here">Slideshow</div>
<p>About Us</p>
I'm trying to sort the list with this jPList library.
The problem is that the library does it with a select option, that I don't like. I'm trying to use a button to order my list.
Here on my JsFiddle you can see a demo I created, my list is bigger, but similar:
http://jsfiddle.net/Danny182/wsauumra/3/
I'm using the function .html to insert inside the html the code they use on this page to sort the list.
If I put manually inside the #sos div it works, but doing it with the button click and .html doesn't.
Can someone help me?
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
});
SOLVED:
using this code works, I had to recall the function after clicking the button:
http://jsfiddle.net/Danny182/wsauumra/4/
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
$('.sortName').click(function () {
$('#sos').html('<div class="hidden" data-control-type="default-sort" data-control-name="sort" data-control-action="sort" data-path=".title" data-order="asc" data-type="text"> clicked </div>');
$('#demo').jplist({
itemsBox: '.list',
itemPath: '.list-item',
panelPath: '.jplist-panel'
});
});
$('#main_div').on('click',".sortName", function() {
$('#sos').html(' clicked ');
});
I am still new to javascript.
I have an application that has two buttons on the page. One is a cpu_vs_player button that displays one game and the other is a player_vs_player button that displays a different game. The problem is that all the code is located in one application.js file. There is no need to load the player_vs_player on $(document).ready(function(){}); if I were to play cpu_vs_player.
Any ideas on how I can get them to load only if I chose that game? (I am only using one route with all the information being hidden / shown based on the click).
The document.ready is nothing more than the moment after the page has rendered and the document needs to be populated with event listeners. Frankly there are multiple way of skinning this cat.
You can either do the jQuery way where you keep javascript and HTML divided:
<button id="button1">cpu_vs_player</button>
<button id="button2">player_vs_player</button>
And for JavaScript:
Assuming you have a function for each gameplay:
function cpu_vs_player() {
// start the game
}
function player_vs_player() {
// need another player
}
Add event listeners the jQuery way:
$(document).ready(function() {
$("#button1").click(function() {
cpu_vs_player();
});
$("#button1").click(function() {
player_vs_player();
});
});
OR you could use the method #Techstone shows you, though you could do it more direct. It all works though.
<button onclick="javascript:cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:player_vs_player();">player_vs_player</button>
Adding another option you can apply
In Javascript:
var Main = {
cpu_vs_player: function() {
alert("start cpu_vs_player");
},
player_vs_player: function() {
alert("start player_vs_player");
}
}
In your HTML:
<button onclick="javascript:Main.cpu_vs_player();">cpu_vs_player</button>
<button onclick="javascript:Main.player_vs_player();">player_vs_player</button>
And yes, there is more ... ;-)
image that your two button and js definition like below
function LetsRock(Playmate) {
....
}
<input type='button' value='cpu_vs_player' id='cpu_vs_player' onclick='javascript:LetsRock(this.id);' />
<input type='button' value='player_vs_player' id='player_vs_player' onclick='javascript:LetsRock(this.id);' />
Try to use the function with parameters (i.e. 0 to cpu v/s player, 1 to player v/s player), and send from the menu page to the $(document).ready(function(){});
I've got the following script. I've got 3 div's that are all display: hidden; that I want to drop down from the top of the page using slideToggle.
<script type="text/javascript">
$(document).ready(function(){
$("#irN").click(function () {
$('#irN_dd').slideToggle();
});
$("#myir").click(function () {
$('#myir_dd').slideToggle();
});
$("#myirmsg").click(function () {
$('#myirmsg_dd').slideToggle();
});
});
</script>
HTML:
<a id="irN">irN</a>
<a id="myir">myir</a>
<a id="myirmsg">myirmsg</a>
This script works great. The only issue is that all 3 can be opened at the same time. I only want 1 to be able to be open at any given time. So...how would I modify the script to do the following..
... if none are open and the viewer clicks one of the id's, it opens....
... if one of the divs are open and the viewer clicks another one of the id's, it slides the one open up and then slides the new one down.
Thanks in advance!
Edit in regard to comments
If you didn't want to check the markup etc, you could use something like the following to acheive what you wanted:
$("#irN, #myir, #myirmsg").click(function () {
var example = "#" + this.id + "_dd";
$(example).siblings("div[id$=_dd]").slideUp()
.is(":visible")
? $(example).delay(1000).slideToggle()
: $(example).slideToggle();
});
This fits all your functions into one concise event (could probably look nicer but I'm too tired to think of anything better right now).
jsFiddle example
I'm trying to code a text adventure and since I've mostly been coding in PHP instead of Javascript, I think I forgot everything about Javascript :P
Anyway, I'm looking for how to show a new button after clicking another button. I have text in "innerHTML" so I don't know how to show another button using that. This is the code I have so far (and the new button is supposed to lead to "b" when you click it)
<script>
function one()
{
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick.";
}
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
}
</script>
<div style="margin-left:15px; width:200px; margin-top:100px;">
<button onclick="one()">Feel around the cave</button>
</div>
<div style="margin-left:255px; width:200px; margin-top:-15px;">
</div>
<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;"><div id="b"></div><div id="a"></div></div>
At the end of your page add the following code in a script tag
var a = document.getElementById('a');
a.addEventListener('click', function () { two()});
You should look jQuery
Try adding this to your one() function:
var newButton = '<button onclick="two()">Pick up stick</button>';
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton;
This will put the button inside the "a" div.