I want to make a select box like pop up item, I come accross with this link
http://tympanus.net/Tutorials/NaturalLanguageForm/
In that they have done select box overwrite method. when clicking on the food it opens in popup about list of the items.
can anyone please tell me how to do similar to this with jquery..
how about this
jsfiddle
<div data-role="header" data-theme="b"><h1>click for option</h1></div>
<p >
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
</p>
You can do something like this. Check the Fiddle
<div class="ui-bar ui-bar-c"> open the dialog
Script
$('#page1').bind('pageinit', function () {
picache = "http://jquerymobile.com/test/docs/_assets/images/jquery-logo.png";
$('#pop1,#pop2').bind('popupbeforeposition popupafteropen popupafterclose', function (e) {
var thm = e.type == 'popupbeforeposition' ? 'b' : (e.type == 'popupafteropen' ? 'd' : 'e'),
tgt = $(e.target).attr('id');
style = tgt == 'pop2' ? 'style="color: firebrick; font-size:1.2em;"' : "";
$('#log').append('<li data-theme="' + thm + '"' + style + '>' + tgt + ": " + e.type + ' raised</li>').listview('refresh');
});
$('#log').on('taphold dblclick', function () {
$(this).find('li').remove();
});
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
EDITED QUESTION
I'm working on a PHP page (not in WordPress so I can't use a plugin) and I want to use AJAX to bring in blog posts (three per page) from a WordPress multisite with pagination.
There is a problem with the pagination in what is rendered on the page.
On accessing the page three posts are displayed however when clicking page two all posts are displayed. The desired behaviour is that the next three posts should be displayed.
<div id="paging"></div>
<ul class="pagination text-center" role="navigation" aria-label="Pagination" data-page="6" data-total="16">
<li class="pagination-previous disabled" onclick="previous()">Previous<span class="show-for-sr" >page</span></li>
<li class="current"><span class="show-for-sr">You're on page</span> 1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="pagination-next" onclick="next()">Next <span class="show-for-sr">page</span></li>
</ul>
</div>
</div>
</div>
<script>
$( document ).ready(function() {
myFetchPosts(1)
});
//start with page one
// var page = 1;
function myFetchPosts(page) {
//pass in the page number
var page = page;
// used a template literal to add the page parameter
var api_url = `example.com/wordpress/wp-json/wp/v2/posts?per_page=3&page=${page}`;
$("#results").empty();
$.ajax({
url: api_url,
contentType: 'application/json',
dataType: 'json',
// headers: 'X-WP-Total',
success: function(response){
// console.log(response.headers);
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var date = new Date(response[i].date_gmt);
var mydate = date.getDate();
var mymonth = date.getMonth();
var myyear = date.getFullYear();
var slug = response[i].slug;
var excerpt = response[i].excerpt.rendered;
var link = response[i].link;
var tr_str =
'<td>'+
'<div class="card" style="width: 250px;">' +
'<div class="card-divider">' + (id+1) + ' ' + slug + '</div>' +
'<img src="example.com/images/model.jpg">' +
' <div class="card-section">' +
'<p>' + excerpt + '</p>' +
'<h4>' + mydate + '/' + mymonth + '/' + myyear + '</h4>' +
'<a href="' + link + ' " target="_blank">'+
'<input type="button" value="read more" style="margin-right: 15px;">' +
'</input>' +
' </a>' +
'<i onclick="myFunction(this)" class="fa fa-thumbs-up" style="margin-right: 15px;" id="' + slug + '">' +
'</i>'+
'<i onclick="myReadingList(this)" class="fa fa-book" style="margin-right: 15px;" id="' + slug + link + '">' +
'</i>'+
' </div>' +
'</div>'+
'</td>'
;
$("#results").append(tr_str);
$("#paging").append(paging);
// increment page so the next time this is called it will fetch the next page
page += 1;
} // end of for loop
} // end of success
}); // end of ajax call
} // end of fetch posts function
So, seems like the v2 version of wordpress API isn't allocated under wp-json address, therefore the address is not valid. According to wordpress support, you must change your url to http://example.com/?rest_route=/wp/v2/posts to make it work.
Firstly, sorry for my bad english, I hope I'll explain well my problem...
So, I'm trying to learn developping and actually I have this code :
<ul>
<li class="odd ajax_block_product {if $smarty.foreach.myhomeFeaturedProducts.first}first_item{elseif $smarty.foreach.myhomeFeaturedProducts.last}last_item{else}item{/if} {if $smarty.foreach.myhomeFeaturedProducts.iteration%$nbItemsPerLine == 0}last_item_of_line{elseif $smarty.foreach.myhomeFeaturedProducts.iteration%$nbItemsPerLine == 1} {/if} {if $smarty.foreach.myhomeFeaturedProducts.iteration > ($smarty.foreach.myhomeFeaturedProducts.total - $totModulo)}last_line{/if}">...</li>
<li class="even ajax_block_category {if $smarty.foreach.myhomeFeaturedCategories.first}first_item{elseif $smarty.foreach.myhomeFeaturedCategories.last}last_item{else}item{/if}">...</li>
</ul>
The UL populates automaticly with smarty, so at the end my HTML is like this :
<ul>
<li class="odd">1</li>
<li class="odd">2</li>
<li class="odd">3</li>
<li class="odd">4</li>
<li class="even">5</li>
<li class="even">6</li>
<li class="even">7</li>
<li class="even">8</li>
</ul>
My problem is that I want to alternate EVEN and ODD classes with jQuery or PHP, but I didn't find how.
I would like to make this :
<ul>
<li class="odd">1</li>
<li class="even">5</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">3</li>
<li class="even">7</li>
<li class="odd">4</li>
<li class="even">8</li>
</ul>
Can somebody tell me how I need to do this please?
Thank you!
Your code seems to be a bit complicated :
$(function () {
var $items = $('li');
var odd = $items.filter('.odd').get();
var even = $items.filter(':not(.odd)').get();
var mixed = [];
while (odd.length) {
mixed.push(odd.shift());
if (even.length) {
mixed.push(even.shift());
}
}
if (even.length) {
mixed = mixed.concat(even);
}
$('ul').append(mixed);
});
Here is a demo : http://jsfiddle.net/wared/unzxv/.
Try using CSS :nth-child pseudo class like below,
li:nth-child(even) { color: green; }
li:nth-child(odd) { color: blue; }
http://www.w3.org/Style/Examples/007/evenodd.en.html
DEMO: http://jsfiddle.net/UCBGJ/
Why don't just use smarty's cycle:
<li class="{cycle values="odd,even"} ajax_block_product....
I find how to do this. Thank you all for helping me ! Here's the code for someone in my situation :
$(function () {
var $oddArray = new Array();
var $evenArray = new Array();
$('ul#shuffle li').each(function () {
if ($(this).hasClass('product')) {
$oddArray.push($(this).html());
} else {
$evenArray.push($(this).html());
}
});
var newLi = new Array();
var index;
var oddIndex = 0;
var evenIndex = 0;
for (index = 0; index < ($oddArray.length + $evenArray.length); index++) {
if (index % 2 == 0) {
console.log("ODD");
if ($oddArray[oddIndex] != undefined)
newLi += '<li>' + $oddArray[oddIndex] + '</li>';
oddIndex++;
} else {
console.log("EVEN");
if ($evenArray[evenIndex] != undefined)
newLi += '<li>' + $evenArray[evenIndex] + '</li>';
evenIndex++;
}
}
delete $oddArray;
delete $evenArray;
$('ul#shuffle').html(newLi);
});
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.
I am showing images in list with having next and previous button.
I have use this jquery in for loop so that it can more than one.
list1:
Prev <ul><li> img1 img2 img3....</li></ul> Next
list2:
Prev <ul><li> img1 img2 img3....</li></ul> Next
if i have three different image list on same page if i click on next Or prev of 1st list then its apply for all list.
how can i apply it for that particular list to move Next and prev.
I have used the code from ths link:http://css-plus.com/2010/09/create-your-own-jquery-image-slider/
i have used folloeing code:
Jquery:
$(document).ready(function(){
// Gallery
if(jQuery(".gallery").length){
// Declare variables
var totalImages = jQuery(".gallery > li").length,
imageWidth = jQuery(".gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery(".gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery(".gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery(".gallery").position().left < 0 && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery(".gallery").position().left > stopPosition && !jQuery(".gallery").is(":animated")){
jQuery(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
Html and php:
<?php foreach($records as $row) :?>
<div id="gallery-wrap">
<ul id="gallery" class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> />
</li>
<?php endforeach ;?>
</ul>
</div>
<div id="gallery-controls" class="gallery-controls">
<a href="#" id="gallery-prev" >Prev</a>
<a href="#" id="gallery-next" >Next</a>
</div>
<?php endforeach ;?>
ok first of all....
1) IDs should always be unique... but in your case you have elements with same ID since it is in loop.. so either change it and makeit unique OR you can change it to class in your HTML code...
<div class="gallery-wrap">
-----^^---- change to class...
2) since you are using class , all your ID selector i.e # should be replaced by class selector . in your jquery code.
jQuery(".gallery-prev").click(function(){
--------^------ here
changes in your
HTML
<div class="galleryDisplayBlock"> //add new div
<div class="gallery-wrap">
<ul class="gallery">
<?php foreach($row['images'] as $image) :?>
<li>
<img src="<?php echo base_url();?>uploads/<?php echo $image['img']; ?> />
</li>
<?php endforeach ;?>
</ul>
</div>
<div class="gallery-controls">
<a href="#" class="gallery-prev" >Prev</a>
<a href="#" class="gallery-next" >Next</a>
</div>
</div>
JQuery
jQuery(".gallery-prev").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left < 0 && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery(".gallery-next").click(function(){
var thisGallery=jQuery(this).parent();
if(thisGallery.find(".gallery").position().left > stopPosition && !thisGallery.find(".gallery").is(":animated")){
thisGallery.find(".gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
Hy ,
I have the following code for mai tabs ...
$(document).ready(function() {
$("#continut_right div.tab").hide();
$("#continut_right div.tab:first-child").show();
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
});
and the markup is something like this :
<div id="continut_right">
<!-- tab 1 -->
<div class="tab" id="id1">
content ... bla bla bla
</div>
</div>
and the menu that trigger tabs to change :
<div id="navigatie_left">
<a style="text-decoration: none; color:#000; font-family:Arial; font-size:15px; font-weight:bold;" href="<?php echo $_SERVER['PHP_SELF']; ?>">[ REFRESH ]</a>
<br /><br />
<ul>
<li id="id1">Categorii principale</li>
<li id="id2">Categorii secundare</li>
<li id="id2">Texte categorii secundare</li>
</ul>
</div>
How can i implement a code ... to remember what tab was opened because when i do a form submit to php_self to keep that tab open to see changes ... ??
Thanks a lot
You can use window.location.hash to store the current tab id. You have to write code that reads the window.location.hash property for the tab id on $(document).ready() and automatically switch to that tab.
An example:
$(document).ready(function(){
var id_tab = window.location.hash;
$("#continut_right div.tab").hide();
if(id_tab){
$("#continut_right").children(id_tab).show();
}else{
$("#continut_right div.tab:first-child").show();
}
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
window.location.hash = id_tab;
});
});
You could look into .appendTo()'s JSON Cookie solution. it would offer an easy method of storing and retrieving the last-active tab.
The usage is documented as follows:
$.cookie( string key, mixed value [, hash options ] )
So you could store the index of the active tab:
$.cookie( 'activeTab', '3' );
And then retrieve it on page load with:
$.cookie( 'activeTab' ); //returns the set value
So let's look at how you could implement it:
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$.cookie( 'activeTab', id_tab ); // storing the new active tab
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
});
Now for us to automatically show the tab on page load:
$(document).ready(function() {
$("#continut_right div.tab").hide();
$("#continut_right div.tab:first-child").show();
// Which tab should we show on document.ready?
$("#continut_right").children("#" + $.cookie('activeTab')).show();
});