I'm having some troubles with a jQuery script.
I get my div's generated with PHP based on data from SQL.
echo "<div class='order' id='a$i' runat='server' draggable='true' >";
On mouseover it shows a different div also generated from PHP and SQL.
echo "<div class='position' id='b$i2' runat='server' draggable='true'>";
Then i have a jQuery script that has the hover function for the second div.
Every div get's it's ID from php. Menu div's get a1, a2, a3.... and hover div's get b1, b2, b3....
$(function() {
var moveLeft = 20;
var moveDown = 10;
var r = 1;
$('div#a'+r).hover(function(e) {
$('div#b'+r).show();
}, function() {
$('div#b'+r).hide();
});
$('div#a'+r).mousemove(function(e) {
$("div#b"+r).css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
The code works for the first div, or the div i specify with the r variable.
I'm having troubles with code working for all the ID's on the page. They get generated based on SQL data.
https://postimg.org/image/ooqnfkx3n/
Is there a way to do this using LOOP function? Or getting the ID from generated div's?
Thanks for all the help in advance.
Use starts with selector
$("div[id^='a']").hover(function(event) {
//Do your thing
}
Documentation: Attribute Starts With Selector [name^=”value”]
How about you add the hover event on class instead of div but add logic based on div.
$(".theclassofA").hover(function(event) {
var id = $(this).attr('id');
var temp_rel = //then get the integer 'r' from this id
var temp_id = "b"+temp_rel;
//use this temp_id to show/hide your elements
}
Related
I have simple Database, which contains fields like ID, product_name, product_description, image, cost.
I have a dynamically generated form which I'm going to send using jQuery, what should I change in my JavaScript to pass to defined div the data which I got from my DB via PHP?
JavaScript Code:
$(function() {
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
$('#calc').on('click', 'a.design_button', function(e) {
e.preventDefault();
$(this).parent().remove();
});
});
---
UPDATE:
I need a little help with merging two parts of JavaScripts to make it work. I need to put somehow that part:
var number = 1;
var contentToLoad = 'Defined structure';
$('a.add').click(function(e) {
e.preventDefault();
$('#calc').append(contentToLoad);
number++;
});
where a.add i've replaced with submit button, inside this one
function add(data_array){
$(document).on('submit', '#add', function()
{
var r_data = data_array;
alert(r_data);
...
});
}
but I can't make it work ;/
I've menaged to do sth like that:
function mini(data_array){
var number = 1;
var r_arr = data_array;
$(this).on('submit', function(e) {
e.preventDefault();
var contentToLoad = '<div id="item-'+ number +'" class="item row"> '+ number +' '+r_arr+' Defined structure </div>';
$('#calc').append(contentToLoad);
number++;
});
}
But now I have a problem with making it work correctly, because it adds me the correct div + all divs which was previously added.
Let's just say that I have blank site and I want to add two divs, so I click twice on the button and it should add me two divs, but it adds after 1st click div with id = 1 and after 2nd click div with id = 2 + div with id=1, So in effect I have three divs after two clicks.
Where in code placed above I've made mistake ?
What I'm trying to achieve
Clone a div and add it below the existing div(s) - jQuery 1 below
...in the div that is being cloned, I already have another jQuery running that shows/hides a child div based on a checkbox - jQuery 2 below
Issue
Cloning works fine. However, I can't get the show/hide based on checkbox to work
Question
Is this possible to do through jQuery? It seems like jQuery 2 doesn't understand that, post-cloning, there's a new div that also would like the same functionality of showing/hiding the child-div based on the checkbox.
jQuery 1
$(document).ready(function() {
var i = 0;
$('.button-add').click(function(){
$i = i++;
//we select the box clone it and insert it after the box
$copy = $('.copybox:first').clone();
$copy.find("input:checkbox").attr("data-related-item","hideconfig"+i);
$copy.find("div#hideconfig").attr("id","hideconfig"+i);
$copy.insertAfter(".copybox:last");
});
$(document).on("click", ".button-remove", function() {
$('.copybox:last').remove();
});
});
jQuery 2
function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item"));
if(item.is(":checked")){
relatedItem.fadeIn();
}else{
relatedItem.fadeOut();
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);
I have an unordered list of img url's that are generated with from a custom post type in wordpress.
I have a slider and am using the number of slides to determine which Image url I want as the background for my element.
Sample of generated list:
<ul class="tes-image-links">
<li>http://img-url1</li>
<li>http://img-url2</li>
<li>http://img-url3</li>
</ul>
Sample of my jQuery
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial.img-back').css("background" , "'url('"+apimglink+"') !important'" );
}
});
When I use console.log() it spits out the right text that is in the <li> tag, but I can't seem to get this to work.
Remove single quotes and !imprtant from background properties. Also dont forget to wrap your function in a DOM ready function
$(document).ready(function(){
$('.cycle-slideshow').find('.cycle-slide').each(function(i){
if ( $(this).hasClass('cycle-slide-active') ){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
$('.ap-testimonial .img-back').css("background" , "url('"+apimglink+"')" );
}
});
})
The previous code is giving me issues and I could not get it to show the image with .each().
Using a for-loop I was able to get the Section to use the URL as a background based on the slide number:
var cycleSlide = $('.cycle-slideshow').find('.cycle-slide');
for (i = 0; i < cycleSlide.length; i++) {
if (cycleSlide.eq(i).hasClass('cycle-slide-active')){
var apimglink = $('.tes-image-links').children('li').eq(i).text();
apimglink = apimglink.replace("http://localhost", "");
$('.ap-testimonial').css('background-image', 'url(' + apimglink + ')');
console.log(apimglink);
} //End If
}; //End For
Thank you all for your help.
iterating over an array, am printing some div content for each iteration.
Whenever the user clicks on any div content, a popup should appear and should show the corresponding content in the popup from the array.
below is my code,
foreach ($email as $client)
{
echo "<div class = 't'> Show more....... </div>";
echo "<div class='popup_msg'>";
echo $client['Email']['body'];
echo "</div>";
}
javascript code below
jQuery(document).ready(function(){
jQuery('.t').click(function(e)
{
var height = jQuery('.popup_msg').height();
var width = jQuery('.popup_msg').width();
leftVal=e.pageX-(width/1.5)+"px";
topVal=e.pageY-(height/13)+"px";
jQuery('.popup_msg').css({left:leftVal,top:topVal}).show();
});
jQuery('.popup_msg').click(function(e)
{
jQuery('.popup_msg').fadeOut('fast');
});
});
in the above codes, what i want to achieve is, whenever the user clicks on the div with class t, the corresponding $client['Email']['body'] should appear in the popup
The problem is that your selector matches all .popup_msg, not only the one you need. Use the find() method to get the correct popup in the $('.t').click function:
jQuery('.t').click(function(e)
{
var popup_msg = jQuery(this).find('.popup_msg');
var height = popup_msg.height();
var width = popup_msg.width();
leftVal=e.pageX-(width/1.5)+"px";
topVal=e.pageY-(height/13)+"px";
popup_msg.css({left:leftVal,top:topVal}).show();
});
Note: I haven't tested this code, it might not be 100% correct but hopefully you get what I mean.
How to generate page numbers like the below using javascript/jquery?
If the 5 th page is selected i have to show 3,4 and 6,7 and also 1,last page with prev,next...
Any suggestion....
EDIT:
How to work with json data that use these pagination div? (ie) My json data contains 50 records
I want to 10 in page 1 and so on... How to paginate json data with these numbers...
I want a jquery function to pass currentpageno,lastpagenumber and the function should generate me page numbers like the below for me
If it is the first page
If it is in the middle,
If it is the last page,
Second EDIT:
I have tried this function but doesn't seem to get the desired result
function generatePages(currentPage, LastPage) {
if (LastPage <= 5) {
var pages = '';
for(var i=1;i<=5;i++)
{
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
if (LastPage > 5) {
var pages = '';
for (var i = 1; i <= 5; i++) {
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
}
I have the lastPage and currentPage values please help me out getting this...
What you are looking for is called "pagination" and there's (as always) a jQuery plugin that does the job for you:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Download it here)
Edit: Since you don't seem to be able to get it working, here is one way (of several different) how you can use the plugin.
Step 1: Generate markup from your JSON-data like the following:
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2 is to implement this function, for instance:
function pageselectCallback(pageIndex, jq){
// Clone the record that should be displayed
var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
// Update the display container
$('#display').empty().append(newContent);
return false;
}
This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.
The third and final step is to initialize the whole thing correctly.
function initPagination() {
// Hide the records... they shouldn't be displayed
$("#hiddenData").css("display", "none");
// Get the number of records
var numEntries = $('#hiddenData div.result').length;
// Create pagination element
$("#pagination").pagination(numEntries, {
num_edge_entries: 2,
num_display_entries: 8, // number of page links displayed
callback: pageselectCallback,
items_per_page: 1 // Adjust this value if you change the callback!
});
}
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
It's not that difficult, is it?
yeah #SLaks is right. nothing too crazy here. You will have 2 variables currentPageNumber and lastPageNumber.
$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
$("div.paginator").append("<a...>"+ x +"</a>");
}
$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");
// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to
Use THIS or THAT plugin. They're both easy html pagination plugins. Put everything in the html at once and paginate with one of those.
Add two new hidden inputs
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
Next add an empty div to create pagination controls
<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}