new to the scene of web developing/design
I've been trying to do this for a week now, but can't seem to figure it out so I was hoping I can get some help, it's basically a light switch
So what I'm trying to do is, when I click the switch the background changes colour, text and image changes as well and vice versa.
Umm here's my attempt, I can get it to change background colour and switch the image, but the text doesn't seem to be changing and I when I re-click it's not changing back to the original state
Here are the images:
http://oi59.tinypic.com/96xhec.jpg
http://oi62.tinypic.com/350ug5l.jpg
html:
<img class="swoff" src="img/switch_off.png">
<span class="msg">Hey, who turn off the lights?</span>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>') </script>
<script src="js/main.js"></script>
</body>
CSS:
body {
font-family:'Raleway', sans-serif;
font-size:1em;
text-align:center;
margin-top:31%;
background:#151515;
}
.swoff {
display:block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:200px;
height:200px;
}
.msg {
color:#fff;
}
.lighttxt {
color:#3c3c3c;
}
Javascript:
$('.swoff').on('click', function() {
var dark = "Hey, who turn off the lights?";
var light = "It's so bright in here!";
var swon = "img/switch_on.png";
if($('img').attr('src',swon)) {
$('body').css({'background-color':'#FFFFF2'});
$('msg').html(dark);
}
else {
$('img').attr(swon,'src')
$('body').css({'background-color':'#151515'});
$('msg').html(light);
}
I think it's easier to work with CSS classes and use the available jQuery methods (addClass,removeClass, etc).
In jQuery, inside element events, the shortcut $(this) refers to the element itself:
$('element').on('click', function(){ $(this).something(); });
Also, use # to target the ID of elements (#id) and . to target the class (.class), we omit this only for HTML tags (input, img, form, etc).
Runnable snippet:
$('#switch').on('click', function() {
var dark = "Hey, who turn off the lights?";
var light = "It's so bright in here!";
if( $(this).hasClass('swoff') ) {
$(this).removeClass('swoff').addClass('swon');
$('body').css({'background-color':'#FFFFF2'});
$('#msg').html(light).removeClass('darktext').addClass('lighttxt');
}
else {
$(this).removeClass('swon').addClass('swoff');
$('body').css({'background-color':'#151515'});
$('#msg').html(dark).removeClass('lighttxt').addClass('darktext');
}
});
body {
font-family:'Raleway', sans-serif;
font-size:1em;
text-align:center;
background:#151515;
}
#switch {
display:block;
margin: auto;
width:200px;
height:200px;
}
.swoff {
background-image: url('http://i.stack.imgur.com/I7Clv.png');
background-size: 100% 100%;
}
.swon {
background-image: url('http://i.stack.imgur.com/vbKrW.png');
background-size: 100% 100%;
}
.darktxt {
color:#fff;
}
.lighttxt {
color:#3c3c3c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="switch" class="swoff"></div>
<span id="msg" class="darktxt">Hey, who turn off the lights?</span>
I'm not sure what you had in mind with this line:
if($('img').attr('src',swon)) {
If you are trying to say "is the src attribute on the image the same as swon", then you want this:
if($('img').attr('src')==swon) {
Calling attr with one argument (i.e. .attr('src') ) gets the attribute, calling it with two (i.e. .attr('src',swon) ), sets it. So instead of checking if the src is equal to swon, you are instead setting it each time. This is the first reason it wasn't toggling. Your other line $('img').attr(swon,'src') is also whacky (wrong argument sequence).
There's more to fix but hopefully that helps.
NOTE: You're missing "});" at the end of the JS.
Related
I am trying to adjust the size of a background image based on the width of the window. I have been testing this, and I can get the alerts to show up in chrome when I 'inspect element' and change the width size, and the alerts show up as they should. But I cannot get the class of the image to change.
Any ideas?
This is my basefunctions.js file
window.onload = function changeClass(){
if( window.innerWidth < 770 ) {
document.getElementById("bg_img").setAttribute("class", "imgMobile");
alert("On Mobile");
}else{
alert("Not on Mobile");
}
}
This is my HTML/CSS
<script language="JavaScript" type="text/javascript" src="js/basefunctions.js"></script>
<style>
#bg_img {
width: 100%;
z-index: 1;
border: 1px #000 solid;
height:80%;
}
.imgMobile {
display: none;
width: 100%;
z-index: 1;
margin-left: -100;
}
</style>
<img src="img/gavel.png" alt="" id="bg_img" class="">
You should use className rather than using setAttribute.
document.getElementById("bg_img").className = "imgMobile";
Here is another SO about changing an dom object's class.
I also put together a jsfiddle to demonstrate.
You can set the class using
document.getElementById("bg_img").className = "imgMobile";
If you want to add the class without overriding other classes, then use
document.getElementById("bg_img").className += " imgMobile";
I want to change the height of the div by clicking it.
Why it doesn't work at the first clicking but the second?
I don't know why, but the height of the div is "" (in the second clicking is 20px because of the else condition)
If I define the height of the div in the html element (style="height: 20px"), it works.
<html>
<head>
<script>
function divOpen() {
var divHeight= document.getElementById("divBottom").style.height;
if (divHeight=="20px") {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
</script>
<style>
div{
border:solid 1px gray;
width:200px;
height:20px;
}
.divBottom {
position: fixed;
bottom: 0;
right: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="divBottom" id="divBottom" onclick="divOpen()"></div>
</body>
</html>
so I know how to fix it, but I don't know why the height is empty in the first clicking.
Please let me know..
any help appreciated!
In the initial click the height style property of your div is '' because you haven't set it.
There is a difference between setting height through the style property and by using a class. Try to refactor your code and make it use offsetHeight instead of style.height.
JavaScript
function divOpen() {
var divHeight= document.getElementById("divBottom").offsetHeight;
console.log(divHeight);
//22 because of the border
if (divHeight == 22) {
document.getElementById("divBottom").style.height="200px";
}
else {
document.getElementById("divBottom").style.height="20px";
}
}
DEMO
i am totally new in web design, and i am right now struggling with creating part of my website, i need to somehow make this happen:
When PART of the BODY BACKGROUND is HOVERED, make the background change to "B", and when the mouse is not over that part, I need it to change back to background "A".
I have seen some examples here but as i am a beginner, i have no idea how to use javascript, if you could please give me some light here, either on pure CSS or on how to apply javascript.
This is accomplished very easily using a third party javascript library called JQuery http://jquery.com, you can see a working example here: http://jsfiddle.net/bbp8G/
$(document).ready(function(){
$("#hover").mouseenter(function(){
$(this).css("background","#009900");
}).mouseleave(function(){
$(this).css("background","#ffffff");
});
});
Here's the easiest way I know how to do what you've described...
<!-- POSITION THIS DIV WHEREVER YOU WANT THE
USER TO HOVER SO THAT THE BACKGROUND WILL CHANGE -->
<div id="hover">
</div>
<!-- PUT THIS CODE IN YOUR <HEAD> -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" />
<style>
#hover { width: 200px; height: 200px; position: relative; top: 200px; background: green; }
.myNewBackround { background-color: red; }
</style>
<script>
$(document).ready(function() {
// when the #hover DIV is hovered, change the background of the body
$('#hover').hover(function() {
$('body').addClass('myNewBackground');
});
});
</script>
Here's a JS FIDDLE:
http://jsfiddle.net/ZKaJn/
Or you can do it with pure CSS
<div id="left"> </div>
<div id="right"> </div>
And the CSS part:
#left
{
background-color:#000;
float:left;
width:50%;
height:200px;
}
#right
{
background-color:#FF0;
float:right;
width:50%;
height:200px;
}
#right:hover
{
background-color:#00F;
}
#left:hover
{
background-color:#F00;
}
You can replace the div's and values with whatever you like, the main part is the #right:hover and #left:hover
Actually with just css it is not possible to change the background of the body when hovering a DOM element. This is because CSS does not allow you (yet) to travel up the DOM tree (select a parent), only down (select a child).
That being said, it is however possible to mimic the effect, and it is even quiet easy if it is the body background you want to change. You can lay a pseudo element with a background on top of your body background, and underneath the actual content. This way it looks as if the body background has changed.
The css to achieve this would look something like this:
.hover-me:hover:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: url(http://placekitten.com/600/300) center center;
background-size: cover;
z-index: -1;
}
And a small fiddle to demonstrate: http://jsfiddle.net/3dwzt/
Should be compatible with IE8 and up
I’m after a hand with a bit of JavaScript if possible, I’m working on a collapsible list using jQuery and want to change a background image in a css file dependent on the state of the list
This is the html for the div
<div class="collapse_div">
<div class="header_div">header text</div>
<div class="content_div">
Some text
</div>
<div class="header_div">another header</div>
<div class="content_div">
some more text
</div>
</div>
This is the .css that puts the image (expanded.gif) into the header div
.collapse_div{
margin: 0;
padding: 0;
width: 500px;
}
.header_div {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(expanded.gif) no-repeat 95%;
background-color:#ccc;
}
.content_div {
padding: 5px 10px;
background-color:#fafafa;
}
And this is the javascript function that controls the expand/collapse when header_div is clicked
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500);
});
});
I’ve played around with adding code to the .click(function) to try and change the background css tag in .header_div to another file (collapse.gif) but I can’t get it to work, so I thought I’d ask the experts as my javascript is really rusty
At the moment the collapse/expand of the div works fine having the background image change on click would really make it look good
You can have a class with the requried background set and apply that class conditionally. Try this
CSS
.header_div_collapsed {
background: url(collapse.gif) no-repeat 95% !important;
}
JS
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
jQuery(this).next(".content_div").slideToggle(500, function(){
var $this = $(this);
if($this.is(':visible')){
$this.removeClass('header_div_collapsed');
}
else{
$this.addClass('header_div_collapsed');
}
});
});
});
Your script should be something like this,
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".expand_div").click(function()
{
var elm = jQuery( this );
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(":visible"))
jQuery(elm).css({"background-image" : "collapse.gif"});
else
jQuery(elm).css({"background-image" : "expand.gif"});
});
});
});
thanks to both the suggestions post below I managed to get this to work
firstly I added a whole new css function as just defining the background didn't work
.expand_div_collapsed {
margin: 1px;
color: #000;
padding: 3px 10px;
cursor: pointer;
position: relative;
background: url(collapsed.gif) no-repeat 95%;
background-color:#ccc;
}
then the JS was changed to this
jQuery(document).ready(function() {
jQuery(".content_div").hide();
//toggle the componenet with class msg_body
jQuery(".header_div").click(function()
{
var co = jQuery(this);
jQuery(this).next(".content_div").slideToggle(500, function(){
if(jQuery(this).is(':visible')){
jQuery(co).addClass('expand_div_collapsed');
}
else{
jQuery(co).removeClass('expand_div_collapsed');
}
});
});
});
the add and remove class calls had to be swapped around and I had to define the var co before the slideToggle call
but thanks to everyone who offered suggestions as I would have never got this to work otherwise
I want to add a simple flag that changes its color when clicked (e.i. transparent flag changes to red when flagged) for the web based exam I'm working on. Could someone help or give me a script on this.
Have a picture of a transparent flag and a flagged flag side-by-side in one picture (for example, the transparent one at {0, 0} and the red one at {0, 22} assuming a size of 22x22 pixels) and switch between them with JavaScript and CSS:
(In the CSS file)
.flag {
background-image: url('flag.png');
display: inline-block;
height: 22px;
width: 22px;
}
.flag.active {
background-position: 0 22px;
}
(In the JavaScript file)
function toggleFlag(flag) {
if(/\bactive\b/.test(flag.className)) {
flag.className = flag.className.replace(/(^|\s)active(\s|$)/g, "");
} else {
flag.className = flag.className ? flag.className + ' active' : 'active';
}
}
Just call toggleFlag with the flag when it should be toggled.
The simplest way is to use two images. When it's clicked, you hide one image and show the other. Working demo here: http://jsfiddle.net/jfriend00/yzYJ3/
HTML:
<div id="container">
<img src="http://photos.smugmug.com/photos/344287800_YL8Ha-Ti.jpg">
<img src="http://photos.smugmug.com/photos/344284440_68L2K-Ti.jpg" style="display: none;">
</div>
CSS:
#container {position: relative; height: 66px; width: 100px;}
#container img {position: absolute; top:0; left:0}
JS (jQuery):
var flagged = false;
$("#container").click(function() {
$(this).find("img").toggle();
flagged = !flagged;
});
Have you looked at jQuery and the examples at jQueryUI - http://jqueryui.com/