switch between colors in jquery - javascript

i have a problem
first this is my code
$('.boxColor ul li').click(function () {
$("link[href*='default']").attr('href', $(this).attr("data-color"));
});
<section class="boxColor">
<i class="fa fa-cog" aria-hidden="true"></i>
<ul>
<li data-color='css/color/alizarin.css'></li>
<li data-color='css/color/amethyst.css'></li>
<li data-color='css/color/concrete.css'></li>
<li data-color='css/color/nephritis.css'></li>
<li data-color='css/color/orange.css'></li>
<li data-color='css/color/piteRiver.css'></li>
<li data-color='css/color/pumpkin.css'></li>
<li data-color='css/color/wetAsphalt.css'></li>
<li data-color='css/color/default_style.css'></li>
</ul>
</section>
the problem is when i click in the li to change the color,
the color changes just on the first click and when i click at another color is not work
the button of switch work just one time

The question doesn't include the <link> element in the HTML, but this is probably because after the first change, link[href*='default'] will no longer select any elements because the new href doesn't contain the string default.
I recommend giving the link element in question an ID so that it remains the same all the time:
HTML
<link rel='stylesheet' type='text/css' href='css/color/default_style.css' id='color_stylesheet'>
<!-- other stuff follows -->
JavaScript
$('.boxColor ul li').click(function () {
$('#color_stylesheet').prop('href', $(this).attr('data-color'));
});

Related

Change the background of li element using the html content of that element

Im pretty sure this is possible, I think Im on the right track, yet it still isn't working for me;
I have this as the jquery, have imported the latest jquery file - what I want is for each colour list item, the content that they contain will be used as their background colour.
If anyone can help me, as I have tried for tens of hours with no success, thank you.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$( "$li.selected-color" ).each(function(element) { var colorlinkcontent = $(element).html(); $(element).css("background-color", colorlinkcontent); });
</script>
<ul class="colors">
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
<li class="selected-color">#f334568
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo
<li class="selected-color">#f334568
<li>Website
</ul>
Some issues:
No li closing tags.
No script opening tag.
The hex colour codes have too many digits.
The script tag needs to wait until the DOM is loaded or go after the list elements.
You need to read how .each() works as the first argument of the callback function is the index not the element.
The selector should be li.selected-color rather than $li.selected-color.
<ul class="colors">
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
<li class="selected-color">#f33456</li>
</ul>
<hr/>
<span class="title">Selected criteria:</span>
<ul class="selected-criteria">
<li>yolo</li>
<li class="selected-color">#f33456</li>
<li>Website</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$( "li.selected-color" ).each( function() {
var $el = $(this);
$el.css( "background-color", $el.text() );
});
</script>

Paginaton Can't Select Original

I have a problem with my webpage, my main problem is with Bootstrap and JQuery working together.
$("ul.pagination li:not(.active) a").on("click",function(){
$(".pagination li.active").removeClass("active");
$(this).parent().addClass("active");
$(".page").hide();
$("#"+$(this).text().toLowerCase()+"Page").show(); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='pagination'>
<li class='active'>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Outside</a>
</li>
<li>
<a href='#'>Fort</a>
</li>
<li>
<a href='#'>Settings</a>
</li>
</ul>
As you can see, it works fine. Until you attempt to move back to the page that was initially active. I also have the code I use for switching pages in the snipped, does anyone has a fix for this?
Change your original selector to
$("ul.pagination li a").on("click",function(){
Otherwise, you aren't binding a click event.
$("ul.pagination li a").on("click",function(){
$(".pagination li.active").removeClass("active");
$(this).parent().addClass("active");
$(".page").hide();
$("#"+$(this).text().toLowerCase()+"Page").show(); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class='pagination'>
<li class='active'>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Outside</a>
</li>
<li>
<a href='#'>Fort</a>
</li>
<li>
<a href='#'>Settings</a>
</li>
</ul>
That's because you are attaching the onclick event only for the not active elements (excluding the first active). You have to make all elements clickable and check if the clicked element is not active inside your handler:
// Add a handler to all elements
$("ul.pagination li a").on("click",function(){
var clicked = $(this);
if(!clicked.parent().hasClass("active")) {
// Do what you want
}
});

jquery tabs with links remember last active item

I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.

dropdown if image files using javascript

I have a dropdown of image icons. Now I want to change the dropdown's default page load icon to one selected by the user, using javascript. I am new to javascript but can not do it. FYI,I have included jquery files too. Please help.
<li>
<div class="dropdown choose-theme" id="theme">
<a class="#" data-toggle="dropdown" href="#"><img src="img/theme/blue.png" alt="Blue"> Blue</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem"><img src="img/theme/green.png" alt="Green" value="img/theme/green.png"> Green</li>
<li role="menuitem"><img src="img/theme/grey.png" alt="Grey" value="img/theme/grey.png"> Grey</li>
<li role="menuitem"><img src="img/theme/red.png" alt="Red" value="img/theme/red.png"> Red</li>
<li role="menuitem"><img src="img/theme/orange.png" alt="Orange" value="img/theme/orange.png"> Orange</li>
<li role="menuitem"><img src="img/theme/blue.png" alt="Blue" value="img/theme/blue.png"> Blue</li>
</ul>
</div>
</li>
Custom javascript I was trying
$(function()
{
$('#theme ul li').click(function({
var $a = $(this).find('a');
$(this).parents('#theme').children('a').replaceWith($a);
});
Try this
$(document).ready(function(){
$('#theme ul li a').click(function(){
$(this).parents('#theme').children('a').html($(this).html());
});
});
You were missing a couple of parentheses and curlies there:
$(function(){
$('#theme ul li').click(function(){
var $a = $(this).find('a');
$('#theme').children('a').replaceWith( $a.clone() );
});
});
I replaced $(this).parents('#theme') with just $('theme') (it's an ID, you should always one and don't need to traverse to find it).
Also did $a.clone();, otherwise the clicked link would actually be removed from the list.

Can't get tabs to work in HTML & JavaScript

I'm not a JavaScript person so I'm having a little difficulty with what I'm trying to do. We have a html page that is supposed to display "tabs" for 3 different details of our product: Description, Details, and Returns. I can get the tabs to display correctly but the JavaScript isn't changing to the tab when I click on the tab header.
Here's my html, pretty basic:
<html>
<head>
<link rel="stylesheet" href="skeleton.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<br><br><br>
<ul class="sans tabs">
<li>
<a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a>
</li>
<li>
Details
</li>
<li>
Delivery & Returns
</li>
</ul>
<ul class="tabs-content">
<li class="active" id="tabinfo">
<p>A description of the product would go here. A description of the product would go here. A description of the product would go here.
A description of the product would go here. A description of the product would go here. A description of the product would go here. A description of the product would go here.</p>
</li>
<li id="tabdetails">
<ul>
<li>Detail #1</li>
<li>Detail #2</li>
<li>Detail #3</li>
<li>Detail #4</li>
<li>Detail #5</li>
<li>etc.</li>
</ul>
</li>
<li id="returns">
<p>Details about returning a product would go here.</p>
<p>Details about returning a product would go here.</p>
<p>See Delivery & Returns for more information.</p>
</li>
</ul>
<script src="tabs.js"></script>
</body>
</html>
and of course, the tabs.js file:
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
Again, I don't know a whole lot about js so I'm sure it's something to do with that but right now I'm stuck and can't figure it out.
You need to wrap your statement in a ready statement.. i.e
$(document).ready(function(e) {
$('body').on('click', 'ul.tabs > li > a', function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
This could be neatened up as well:
$('body').on('click', 'ul.tabs > li > a', function(e) {
could become
$('.tabs').on('click', 'a', function(e) {
Try using this jquery ui tabs. you will find all the code you need and an explanation on how to apply it in the link provided
You need to add the Click handler on the Tab headers, instead of on the body
$("body ul.tabs li").click(function() {
// the function goes here.
});
This is assuming that you're using jQuery. If you're not already using it, you should add this under the head section.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

Categories

Resources