The correct, working code can be seen on the replies. End result: http://www.creativewebgroup.co.uk/library/colorshareV2/palette/Android
I'm attempting to make a colour palette script.
I have this jQuery script:
<script>
//document ready
$(document).ready(function () {
$('.palette-detail li').each(function () {
$(this).html('<input type="text" style="background: #' + $(this).attr('swatch') + '" />' );
});
$('.palette-detail').click(function (e) {
var elem = e.target;
if ($(elem).is('input')) {
$(elem).val($(elem).parent().attr('swatch'));
}
});
});
Here's a basic idea of the HTML used (in the script however it's PHP driven).
<ul class="palette">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<span>Title</span>
</ul>
At the moment the script requires the user to click on a li block for the hex code to display. I want it to instead show straight away.
Is this possible? If so how?
Thanks a bunch guys!
HTML
<ul class="palette">
<li swatch="#4362ff">
<li swatch="#ee3d5f">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
<li swatch="#FFFFFF">
</ul><span>Title</span>
jQuery
//document ready
$(document).ready(function () {
$('.palette li').each(function () {
$(this).html('<input value='+$(this).attr("swatch")+' type="text" style="background: ' + $(this).attr('swatch') + '" />');
});
});
fiddle
There were lots of mistakes in the code. You didn't select the correct class for the UL.
Also UL elements can not contain span elements.
Also using inspect element would have showed the code does what it told it to and put ## on front of the color.
Related
Using JQuery I want to check that each list item has the css class Complete. If so, i want to display a button, if not I want to keep the button hidden.
The classes are currently inserted dynamically using PHP when the page loads.
My code so far is;
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
<script>
jQuery( document ).ready(function() {
var steps = [];
jQuery( ".wb-steps li" ).each(function( index ) {
// successfully displays complete for each list item
console.log( index + ": " + jQuery( this ).attr('class') );
// if all stepa have 'complete' show button
$("#steps-complete").show();
});
});
</script>
You have the $class variable, and its value is set as the class of all list items.
Since you are using PHP to render the page, you can use the same variable to test if the button should be shown or not. So you wouldn't need jQuery in this case, you can just remove that part.
Here's what it would look like:
<?php
if (strpos($class, 'Completed') !== false) {
?>
<button id="steps-complete" hidden>Download Now</button>
<?php
}
?>
This works in your case because you set the same class to all items.
Hope this helps.
i've made a function to check of the children of the wb-steps have a class named john, if not then we show the steps complete
jQuery( document ).ready(function() {
if($(".wb-steps").children().not('.john').length = 0){
console.log("there was a div found with a class named john");
}else{
$("#steps-complete").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="steps-complete" hidden>Download Now</button>
<ul class="wb-steps">
<li class="<?php echo $class ?>">Step 1</li>
<li class="<?php echo $class ?>">Step 2</li>
<li class="<?php echo $class ?>">Step 3</li>
</ul>
You can simply count the elements to see if all of them have the complete class:
jQuery(document).ready(function() {
var $steps = $(".wb-steps li");
var show = $steps.length === $steps.filter('.complete').length;
$("#steps-complete")
.toggle(show)
.get(0)
.toggleAttribute('hidden', show);
});
Got a problem with my WordPress menu. After I insert the jquery my links (in the menu and in sidebars won't work. What to do? Thank you!
My code:
HTML
<ul class="menu">
<li class="menu-item">
Link text
<ul class="sub-menu">
<li><a>Text</a></li>
<li><a>Text</a></li>
<li><a>Text</a></li>
</ul>
</li>
</ul>
jQuery
$(document).ready(function(){
$('li.menu-item').each(function() {
var $dropdown = $(this);
$($dropdown).click(".menu-item a", function(e) {
e.preventDefault();
$ul = $("ul.sub-menu", $dropdown);
$('ul.sub-menu').toggle();
$("ul.sub-menu").not($ul).hide();
return false;
});
});
$('html').click(function(){
$("ul.sub-menu").hide();
});
});
There might be a problem with the event propagation. If a link within a sub-menu is clicked the click event propagates to the surrounding menu-item and triggers your JS code.
Please try to add this code to prevent the propagation effect:
$( "ul.sub-menu a" ).click(function( event ) {
event.stopPropagation();
});
please fix the issue by replacing below script
<li class="menu-item> to <li class="menu-item">
In my code which is using bootstrap, I got a problem.
I am using JS code shown as below.
$( "li:eq(1)" ).click(function() {
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
It is to control the div.
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
When I click the test button, the link will change to test.php# but nothing change. Click again, it can load into the test.php.
The problem is the link is test.php, the code not work. when test.php# , it work. And I would like to know why.
Thanks a lot.
The problem is because you have attached the handler to the li element, but the a element is clicked, and then transfers the page. Try this instead:
$("li:eq(1) a").click(function(e) {
e.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
});
The preventDefault() stops the default behaviour of the link, meaning your AJAX request gets executed as required.
since you want to use $.get (AJAX), you don't have to give the url to <a> element inside your <li> element,
you have to give the attribute href inside <a> element this value: javascript:void(0) Or #,
your html code would be:
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
or you have to prevent default action for the element to prevent reloading url by adding:
event.preventDefault() in you onclick event and your js code would be:
$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
hi i am using jquery ui sortable to sort my divs . i can get the div oder to save in the db , this is my code
<div style="margin:0 auto !important;">
<ul id="sortable1" class="connectedSortable">
<li id="one_1" class="ui-state-default"><div>Item 1</div></li>
<li id="one_2" class="ui-state-default"><div>Item 2</div></li>
<li id="one_3" class="ui-state-default"><div>Item 3</div></li>
<li id="one_4" class="ui-state-default"><div>Item 4</div></li>
<li id="one_5" class="ui-state-default"><div>Item 5</div></li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li id="two_1" class="ui-state-highlight"><div>Item 1</div></li>
<li id="two_2" class="ui-state-highlight"><div>Item 2</div></li>
<li id="two_3" class="ui-state-highlight"><div>Item 3</div></li>
<li id="two_4" class="ui-state-highlight"><div>Item 4</div></li>
<li id="two_5" class="ui-state-highlight"><div>Item 5</div></li>
</ul>
</div>
<script type="text/javascript">
jQuery(function() {
var sortable1 = 'one_1,one_2,one_3,one_4,one_5';
var sortable2 = 'two_1,two_2,two_3,two_4,two_5';
jQuery( "#sortable1, #sortable2" ).sortable({
update: function(event, ui) {
var newOrder = jQuery(this).sortable('toArray').toString();
if(jQuery(this).attr('id')=="sortable1"){
sortable1 = newOrder;
}
else {
sortable2 = newOrder;
}
console.log(sortable1);
console.log(sortable2);
}
}).disableSelection();
});
</script>
i can save the sorted div order to DB correctly , but i have no idea how to populate the div's to correct order again . please help me . thanks in advance .
Instead of saving the sort order to the DB as the comma separated value 1,2,3,4,5, why not just save the 'sort column' e.g. #sortable1 such that when you are loading the divs you just pass this value to your js logic.
Example:
if you save the sort column name say #sortable1 or #sortableN in the DB then you end up with
var newOrder = jQuery(this).sortable('toArray').toString();
if(jQuery(this).attr('id')== "<% $your_php_variable %>"){
sortable1 = newOrder;
}
else {
sortable2 = newOrder;
}
Am not sure how you are passing the php variable to the UI that's what i've put as <% $your_php_variable %>. At some point in your php code you will have set $your_php_variable = '#sortableX';
I'm having problems making this code work:
$(function(){
$('div.tags').delegate('input:checkbox', 'change', function() {
var $lis = $('.results > li').hide();
//For each one checked
$('input:checked').each(function() {
$lis.filter('.' + $(this).attr('rel')).show();
});
});
});
With HTML like:
<div class="tags">
<label><input type="checkbox" rel="arts" /> Arts </label>
<label><input type="checkbox" rel="computers" /> Computers </label>
<label><input type="checkbox" rel="health" /> Health </label>
<label><input type="checkbox" rel="video-games" /> Video Games </label>
</div>
<ul class="results">
<li class="arts computers">Result 1</li>
<li class="video-games">Result 2</li>
<li class="computers health video-games">Result 3</li>
<li class="arts video-games">Result 4</li>
</ul>
I've tried it in IE, FF & Opera, but I don't get expected results. That is, the content is not being filtered upon clicking a checkbox? I'm trying to replicate something similar to this:
http://www.houseoffraser.co.uk/Jeans+for+Women/302,default,sc.html
Notice the accordian effect on the left side bar of the page. I'm not too worried about the accordian itself, it's the checkboxes function that I'm focusing on at the moment. On page load, all query results (some 1300 or so), are displayed to the user.
A user can then filter or refine the results by clicking on checkboxes. I'm assuming this is some kind of Jquery/Ajax script, but am not entirely sure? Am I on the right track?
Thanks in advance.
You mentioned in a comment that you're using jQuery 1.3
jQuery's delegate() method was introduced in 1.4.2, so won't be available. You'll have to use a later version of jQuery (any reason why you're using such an old version?).
If you open your developer console (F12 shortcut in Chrome), you should see an error saying that TypeError: Object [object Object] has no method 'delegate'
If you need to use jQuery 1.3, try:
$(function() {
$('div.tags').bind('change', function(e) {
var that = e.originalEvent.target;
if ($(that).is('input:checkbox')) {
var $lis = $('.results > li ').hide();
//For each one checked
$('input:checked ').each(function() {
$lis.filter('.' + $(that).attr('rel')).show();
});
}
});
});
Which you can see working here
$(document).ready(function () {
$('.results > li').hide();
$('div.tags').find('input:checkbox').live('click', function () {
$('.results > li').hide();
$('div.tags').find('input:checked').each(function () {
$('.results > li.' + $(this).attr('rel')).show();
});
});
});
for live demo see this link: http://jsfiddle.net/nanoquantumtech/Ddnuh/
Try this once
$(function(){
$('div.tags').delegate('input:checkbox', 'change', function() {
var $lis = $('.results > li').hide();
//For each one checked
$('input[type="checked"]:checked').each(function() {
$lis.filter('.' + $(this).attr('rel')).show();
});
});
});