JQuery - Changing active link color - javascript

I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>

One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});

Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz

To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});

Related

Change HTML image source in a div with javascript when click on label not working

I need to change the image inside a div in HTML when clicking a label. I don't think I need to use jquery for that, I want to use just javascript. After some research, it looks simple, all the answers are the same, but I can't get it to work. I know the function when clicking the label works because the label change color, but the image doesn't change and I don't get any syntax error. I'm using chrome. I don't know what I'm doing wrong.
this is HTML/CSS code:
<html>
<body>
<div id="slc_on_label">
<img src=https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg>
</div>
<style>
#slc_on_label img {
position:fixed;
width:5.5%;
left:10%;
top:10%;
}
</style>
<label class = "button" id="button" onclick="run(this)">0</label>
<style>
.button {background-color:Powderblue;
font-size: 5vw;
}
</style>
<script src="question.js" ></script>
</body>
</html>
This is the javascript code:
function run(button) {
document.getElementById("slc_on_label").src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
button.style = "background-color:red";
}
You're trying to set the src attribute on <div id="slc_on_label"> instead of the <img> inside it.
You can use document.querySelector() to select the image inside the div:
document.querySelector("#slc_on_label img").src =
"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
<html>
<head>
<style>
#slc_on_label img {
position: fixed;
width: 5.5%;
left: 10%;
top: 10%;
}
.button {
background-color: Powderblue;
font-size: 5vw;
}
</style>
</head>
<body>
<div id="slc_on_label">
<img src="https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg">
</div>
<label class="button" id="button" onclick="run(this)">0</label>
<script>
function run(button) {
document.querySelector("#slc_on_label img").setAttribute('src', 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg');
button.style = "background-color:red";
};
</script>
</body>
</html>
function run(button) {
document.querySelector('slc_on_label img').src =
'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg';
button.style.backgroundColor = 'red';
}
Also not breaking the button style.

Toggle div using javascript

I'm trying to use this jsfiddle but it's not working offline. Can you please point out the error: http://jsfiddle.net/2ofkr7ph/
This is my code but it's not working on local.
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script>
var menu_elements = document.querySelectorAll('.menu>li'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
menu_elements[i].addEventListener('click', function (e) {
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings) {
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
</script>
</head>
<body>
<ul class="menu">
<li class="toggle1">One</li>
<li class="toggle2">Two</li>
<li class="toggle3">Three</li>
<li class="toggle4">Four</li>
<li class="toggle5">Five</li>
</ul>
<div class="container">
<div class="toggle1">Here are the contents of 1.</div>
<div class="toggle2">Here are the contents of 2..</div>
<div class="toggle3">Here are the contents of 3...</div>
<div class="toggle4">Here are the contents of 4....</div>
<div class="toggle5">Here are the contents of 5.....</div>
</div>
</body>
</html>
It's working fine on JSFiddle website, but not working on local machine.
The script is loaded and executed BEFORE the HTML elements are encountered. You can move the script to below the BODY tag and it works offline.
Good Luck!
Just add the script at the end of your , and then it'll work fine.
The contents inside the script tag need to be placed in some kind of function and the function needs to be called when the body loads, or else they won't run properly. Place all your Javascript code inside a load function like this:
<script>
function load() {
// rest of the code..
}
</script>
and then set the function to be called when the document loads:
<body onload="load()"> ...
Everything should then work properly.
The problem is not with your java script it is with the fact that you are writing your java script before your html.
This does not give JS enough time to load your html
An easy fix for this is to move your JS to the bottom or use something like document.ready()
I've changed Your code part with jQuery and it's sugar. It's more cross-browser solution and saves You time.
Use this:
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.menu>li.toggle').click(function(){
$('.togglable').hide();
$('.togglable[data-id="'+$(this).data('id')+'"]').show();
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="toggle" data-id="1">One</li>
<li class="toggle" data-id="2">Two</li>
<li class="toggle" data-id="3">Three</li>
<li class="toggle" data-id="4">Four</li>
<li class="toggle" data-id="5">Five</li>
</ul>
<div class="container">
<div class="togglable" data-id="1">Here are the contents of 1.</div>
<div class="togglable" data-id="2">Here are the contents of 2..</div>
<div class="togglable" data-id="3">Here are the contents of 3...</div>
<div class="togglable" data-id="4">Here are the contents of 4....</div>
<div class="togglable" data-id="5">Here are the contents of 5.....</div>
</div>
</body>
</html>

Using jQuery flip, can't get revert flip to fire

Morning! The following is (I know not the best) jQuery code using the Flip! jQuery plugin. The original flip fires fine, but the revert flip will not function for the life of me. I've tried tons of different things, but no success. This is what I currently have.
Any help will be greatly appreciated!
$('.flip1').bind("click",function(){
var elem = $(".toflip");
if(elem.data('flipped')){
elem.revertFlip();
elem.data('flipped',false)
} else {
elem.flip({
direction:'lr',
dontChangeColor: true,
onBefore: function(){
elem.html(elem.siblings('#flip1Data').html());
}
});
elem.data('flipped',true);
}
});
$('.flip2').bind("click",function(){
var elem = $(".toflip");
if(elem.data('flipped')){
elem.revertFlip();
elem.data('flipped',false)
} else {
elem.flip({
direction:'lr',
dontChangeColor: true,
onBefore: function(){
elem.html(elem.siblings('#flip2Data').html());
}
});
elem.data('flipped',true);
}
});
$("#flip1back").bind("click",function(){
$('.toflip').revertFlip();
return false;
});
$("#flip2back").bind("click",function(){
$('.toflip').revertFlip();
return false;
});
The following code performs left and reverse flip. If you want to change flip direction, simply change direction property on JS code. Don't forget to upload necessary JS files to your folder (you can see them at the bottom of HTML code). Here's a link to the working example.
CSS:
.button {
display:inline-block;
padding:10px;
color:#fff;
cursor:pointer;
margin-top:40px;
}
.button#left {
background-color:green;
}
.button#revert {
background-color:red;
display:none;
}
#flipbox {
width: 500px;
height: 200px;
line-height: 200px;
background-color: #ff9000;
font-family: 'ChunkFive Regular', Tahoma, Helvetica;
font-size: 2.5em;
color: #ffffff;
text-align: center;
}
HTML:
<div id="flipbox">front content</div>
<div class="button" id="left">left</div>
<div class="button" id="revert">revert</div>
<!-- JavaScript at the bottom for fast page loading -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jqueryui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript">
$(function(){
$("#left").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: "rl",
color: "#39AB3E",
content: "back content",
onBefore: function(){$("#revert").css('display','inline-block');}
})
return false;
});
$("#revert").bind("click",function(){
$("#flipbox").revertFlip();
return false;
});
});
</script>
EDIT
Revert button is shown only after first left flip: there's no way to revert a flip if you still haven't do it :) Code and working example are up to date.

CSS Margin and padding issue

I'm facing a difficulty to make the drop down list looks good as it has messed up with CSS
DEMO.HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
display: block;
}
</style>
</head>
<body>
<div id='wrap'>
<div id="clickable_div">MENU</div>
<div id="nav_menu">
<ul class="dropDown">
<li id="li_1"><img src="images/ori_12.png"></li>
<li id="li_2"><img src="images/ori_14.png"></li>
<li id="li_3"><img src="images/ori_15.png"></li>
<li id="li_4"><img src="images/ori_16.png"></li>
</ul>
</div>
</div>
</div>
</body>
<script>
$('#wrap').mouseover( function(){
$('#nav_menu').slideDown();
});
$('#wrap').mouseleave( function(){
$('#nav_menu').slideUp();
});
$('#nav_menu li img')
.mouseover(function () {
this.src = this.src.replace('/ori_', '/hover_');
})
.mouseout(function () {
this.src = this.src.replace('/hover_', '/ori_');
});
</script>
</html>
DEMO.CSS:
#clickable_div {
width: 166px;
background-color: #9c9c9c;
display: block;
}
#nav_menu {
width: 166px;
height: auto;
background-color: #CCC;
display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap {
width: 166px;
}
By copying the code, you will see the drop down menu has messed up. It can be fix by using *{padding:0;margin:0} but all the other elements on the same page will have no padding and margin which is definitely not the desired output. I've tried set padding and margin to 0 for each and every element such as #wrap, #nav_menu but none of them works.
Your issue is with the ul which by default takes some margin. You can reset it independently.
try add this
ul.dropDown{
margin:0px;
}
Fiddle
Plus the transition issue on your menu while hovered in and out quickily can be resolved using stop() and also note that pair event for mouseleave is mouseenter not mouseover So try
$('#wrap').mouseenter( function(){
$('#nav_menu').stop(true, true).slideDown();
}).mouseleave( function(){
$('#nav_menu').stop(true, true).slideUp();
});
or just
$('#wrap').on( 'mouseenter mouseleave', function(){
$('#nav_menu').stop(true, true).slideToggle();
});
Fiddle
When you use the asterisk (*) as as selector in CSS, you are selecting every element on the page! That is a lot to select. Fortunately, CSS provides a way to select specific elements only.
for example, all you want to select is the <ul> on the page, right? Follow this pattern for a selector: parent child{margin:0px;} To make this what you want you can do this: #nav_menu ul.dropDown{margin: 0px;}.
That should fix your problem!

Spoiler Display Code

I have a question about your spoiler in this page:
http://jdownloader.org/download/index
When i click on Windows it appears a table but when i click on Linux the content of Windows disappears. I want create a spoiler like this but that the content of one spoiler doesn't disappear when i press another spoiler.
What exactly should I change in this code (html source)?
<div class="dokuwiki">
<div class="right_page">
<div class="entry-content">
<script type="text/javascript" src="./JDownloader.org - Official Homepage_files/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
$(".OS").not(this).each(function(i) {
$(this).find(".details").hide("slow");
});
That part finds all the ones that are NOT the current (clicked) one and hides them.

Categories