My intent is to add a class to the header when a div is clicked. I have included the website I'm working with, just to make thing's easier:
URL - http://itsmontoya.com/work/iM/
I have added a class 'expanded' to the header. This is to show how the navigation should look after the button has been pressed. I created a simple Javascript which is supposed to provide an alert when I click the button. I can't seem to get this to work. Any ideas of what I did wrong?
Thanks!
EDIT - I was able to get the alert to properly work when clicking the button div. I'm very close to having this complete! :) Now I'm getting stuck with the variable not passing correctly.
<script type= "text/javascript">
var expanded = false;
function btnClick(){
alert('The variable expanded is '+expanded);
if(expanded === false) {
document.getElementById("header").className = "expanded";
var expanded = true;
} else {
document.getElementById("header").className.replace(/\bexpanded\b/,'');
var expanded = false;
}
};
</script>
I'm updating the ftp server now :)
When using jQuery, you have to bind your events in such a way that the elements have already loaded.
You have:
<script type= "text/javascript">
$("#expandBtn").click(function(){
alert('hello');
});
</script>
I think what you want is:
<script type= "text/javascript">
$(document).ready(function(){
$("#expandBtn").click(function(){
alert('hello');
$('header').addClass('expanded');
});
});
</script>
The API documentation is going to be your friend here. First step -- ready().
UPDATE
You have this call to jQuery:
$j('#header').addClass('expanded');
But your markup is for the HTML5 element <header>. In that case your jQuery needs to change to:
$j('header').addClass('expanded');
Where $j is your jQuery object. More typically you would use $ or jQuery.
Time to bone up on jQuery Selectors!
UPDATE
Here's your updated page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>itsMontoya</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">
$(document).ready(function(){
$('.expandBtn').bind('click', function(){
$('header').toggleClass('expanded');
});
});
</script>
</head>
<body>
<div class="wrap">
<header id="header" class="">
<div class="blackBG transparent"></div>
<nav>
<ul>
<li>
Home<img src="images/home.png">
</li>
<li>
Pictures<img src="images/pictures.png">
</li>
<li>
Music<img src="images/mymusic.png">
</li>
<li>
About Me<img src="images/aboutme.png">
</li>
<li>
Resume<img src="images/resume.png">
</li>
</ul>
</nav>
<div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
</header>
<section class="content">
<article class="blogEntry"></article>
</section>
<footer class="anchor">
<div class="over anchor"><p>2011 itsMontoya.com</p></div>
<div class="blackBG transparent anchor under"></div>
</footer>
</div>
</body>
</html>
Using jQuery:
$('#your_div_id').click(function(){
console.log("Clicked.");
$("#header").addClass('expanded');
});
Update
In your code:
var expanded = false;
function btnClick(test){
if($expanded === false) {
.
.
.
What the heck is $expanded? Notice that in JavaScript we don't need the $ sign for variables.
This is how you would bind a click handler to your div and add the class to your header:
var yourDiv = document.getElementById('your-div-id');
var header = document.getElementById('header');
yourDiv.onclick = function(){
alert("yourDiv was clicked");
header.className = "newCssClass";
};
The above assumes markup like so:
<div id="your-div-id">Click</div>
<div id="header"></div>
Here's an example.
Update: The reason that the expanded variable isn't working as you'd expect is because you're creating a duplicate local variable called expanded in your btnClick() method. As a result, the global expanded variable you declare outside the function is never updated.
This is being caused by how you're using the var keyword:
When used outside a function, var creates a global variable that's accessible anywhere within the current document.
When used inside a function var creates a local variable that is accessible only within that function.
Here's your function cleaned up to work as you'd expect:
// Define global variable (using var outside function)
var expanded = true;
function btnClick(){
alert('The variable expanded is '+expanded);
// Condition for true
if(expanded) {
// do something
// Condition for false
} else {
// do something else
}
// Flips boolean value of the global variable (notice lack of var keyword)
expanded = !expanded;
}
Here's an example showing the correct way to update the expanded variable.
Related
Wanted to know if it is possible and if so where am i failing on capturing a url and displaying the contents of that file into a div on the same page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<p id = "heading">Is Nursing For You?</p>
<br/>
<div id = "div1" align="center"></div>
</div>
<div data-role="footer" id = "foot" data-position="fixed">
</div>
</div>
$(document).ready(function() {
$("#div1").load('FONWVhp.php', function() {
$('#div1 div.center-wrapper a button').click(function(event){
event.preventDefault();
($(this).parent().attr('href'));
$("#div1").load(($(this).parent().attr('href'))'articles.php',
function() {
});
});
});
});
</script>
</body>
</html>
fonwvhp.php
index.html loads pages hrefs(which are pointed to articles.php?pageId...)once the page is clicked i want the href to load into the div1 tag and display the href results.
$sqlPAQuery = "SELECT pages.pageId, pages.pageTitle FROM pages order by
pages.pageId";
$paqueryResult = mysqli_query($conn,$sqlPAQuery);
while ($paqueryRow = mysqli_fetch_object($paqueryResult))
{
$pages = "<div class='center-wrapper'><a href = articles.php?
pageId=".$paqueryRow->pageId."><button class= center-
wrapper'>".$paqueryRow-
>pageTitle."</button></a><br/><br/></div>";
echo $pages;
}
articles.php
this is the page i would like to be placed in div1 tag after page href is clicked
$sqlARTICLEQuery = "SELECT * FROM articles where pageId=".$_GET['pageId']."
order by articleId";
$articlequeryResult = mysqli_query($conn,$sqlARTICLEQuery);
while ($articlequeryRow = mysqli_fetch_object($articlequeryResult))
{
$articles ="<div id = 'div1' class='center-wrapper'><a href = article.php?
articleId=".$articlequeryRow->articleId."><button id
='wrapper'>".$articlequeryRow->articleTitle."</button></a><br/><br/></div>";
echo $articles;
}
This is a guess but most likely you forgot the / or you have the ) in the wrong spot
Change
$("#div1").load(($(this).parent().attr('href'))'articles.php'
To
$("#div1").load(($(this).parent().attr('href')+'/articles.php')
These 2 lines
($(this).parent().attr('href'));
$("#div1").load(($(this).parent().attr('href'))'articles.php',
The first line is useless. Delete it.
The second line. You're getting the href of the parent element to the button that was clicked in content loaded from FONWVhp.php (which you didn't post, by the way so I have to guess what it is). To that you are trying but failing to append 'articles.php'.
// Delete me ($(this).parent().attr('href'));
$("#div1").load($(this).parent().attr('href') + 'articles.php',
Note that this will work fine as long as the href always ends in a slash. If it doesn't, which might be likely (depending again on what the mysterious FONWVhp.php contains) then you will have to figure that out too (by putting a slash in, most likely).
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
i am a newbee so sorry if my question is basic.
i have written a code (with the help of the forum offcourse) where by clicking on an image another one appears and when you click on the new one, again another one appears and so on.
the problem is i can not add an style to the code and make the images appear in different positions to make a layout.
can anyone here help me?
thank you so much
<meta charset="utf-8">
<title> COOPER BLACK </title>
<link rel="stylesheet" type="text/javascript" href="style.css" media="screen">
</head>
<div class="container">
<script type="text/javaSCRIPT">
var i = 1
function imageClick() {
if (! this.alreadyClicked)
{
addimage();
counter();
this.alreadyClicked = true;
}
}
function addimage() {
var img = document.createElement("img");
img.src = "images/d"+i+".jpg";
img.onclick = imageClick;
document.body.appendChild(img);
}
function counter() {
i = i + 1
}
</script>
<div class="first">
<input class="first" type="image" src="images/d0.jpg" onclick="imageClick();">
</div>
</div>
Try setting the class attribute this way
img.setAttribute("class", "YourClassName");
Then apply the style to YourClassName in a CSS file/style tag. (Might also want to call the script after you load the CSS) Like so
.YourClassName { /* style here */ }
Edit:
You can also check if the elements are rendered well (the HTML tags have the class names and onClick methods) using the console (press F12 on the page)
Why won't the text inside the tags change, when it clearly should change? Can anyone help?
Here is my HTML and JS code:
function pickStick(); {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
And...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<br><br>
<div id="weapon">You see a stick. You can pick it up.</div>
</body>
</html>
You have a semicolon after your function name ( function pickStick(); ), you need to remove that:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
Then you may want to remove the href from your <a> so it doesn't move to a new page, or replace it with href="#":
pick it up.
You need to update 2 things
JS update
Replace
function pickStick(); {
with
function pickStick() {
Markup update
Replace
<a href="" onclick="pickStick()">
with
<a href="#" onclick="pickStick()">
or
<a href="javascript:void(0);" onclick="pickStick()">
For reference - http://plnkr.co/edit/wu1y9OA1Ml1gQPCEQImB?p=preview
This works:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
<div id="weapon">You see a stick. You can pick it up.
So the problem is probably due to you having a semi-colon in your function definition, or the missing pound sign (#) in your anchor.
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}