We Keep Coding

My Script load too late

I try to use a script for prefilter ISOTOPE from an other page, but my Isotope script doesn't load my value with the filter value.
You can test by yourself here : http://aprime-industries.com/
Just click on "Nos Références" and click on ENTI for exemple.
You will see my dropdown list is "ENTI" selected but the filter is not active, I need to click on "Indifférent" and click again on ENTI for activate the filter and the data-filter-value.
<option value="ENTI" data-filter-value=".ENTI">ENTI</option>
I will give you my script for link the value from the dropdown list :
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
And
$(document).ready(function(){
var preSelected = getParameterByName("filter");
if(preSelected == "ENTI") {
$('select[name="societe"]').val("ENTI");
}
else if(preSelected == "S2MI") {
$('select[name="societe"]').val("S2MI");
}
else if(preSelected == "JBM41") {
$('select[name="societe"]').val("JBM41");
}
});
And my href link :
<img src="img/entilogo.png" class="" alt="icone ENTI">
<img src="img/s2milogo.png" class="" alt="icone S2MI">
<img src="img/jbm41logo.png" class="" alt="icone JBM41">
I make a jsfiddle for my isotope script JSFIDDLE
Bump ! my deadline is tomorrow :(

it is loading too late because it is inside $(document).ready(function(){}. Window will load first and then the code inside $(document).ready(function(){} will be executed.
So loose $(document).ready(function(){} and keep the script in header to load it before body part loads.
But it is highly recommended to keep the scripts in footer and inside $(document).ready(function(){} since it will load the script at the end of window load and load your html elements faster.

How to know that the anchor was on text or image?

I was suffering from the problem of getting anchor text and print it on the redirected screen in my question:
How to get anchor text in a Session variable?
I got the solution from this question but now if the anchor is on the image,How can i pass some text with it to print it on the redirected page ?
Someone Kindly review the question above in link and help me please.
Thanks in advance

your question is <a><img src="sample.jpg"></a> right. pass some title using window.location.href = $(this).attr("href") + "&title=" + $(this).text(); and print title as
var a = window.location.href.split('&')
var print = a[a.length - 1]
console.log(print)
Hope this will be helpful for you

You can use data- attributes:
<a class="customLink" href="your/url" data-text="yourText"><img src=".." alt=".." /></a>
and send the url with the text from the data-text attribute:
$(document).on('click', '.customLink', function(e) {
e.preventDefault();
var that = $(this);
var url = that.attr('href');
var text = that.attr('data-text');
// Continue here ...
})

Javascript not loading correctly in Chrome

I have a messages page where i can see them as a list. If i select each one of them, I display them in the right side of the page. For that, I have two javascript functions for "next" and "previous" buttons for the messages' page. So I have a list of messages on the screen, if I click "next", I see the next page of messages and so on.
Everything work allright, the only problem is in Chrome, it wouldn't load the page number in a span section on the bottom of the page. This is the function for next page:
$("#next").click(function() {
var currentPageElem = $("#currentPage");
var totalPagesElem = $("#totalPages");
var minItemElem = $("#minItem");
var maxItemElem = $("#maxItem");
var totalItemsElem = $("#totalItems");
var itemsOnPageElem = $("#itemsOnPage");
var currentPageValue = parseInt(currentPageElem.val(), 10);
if (currentPageValue < totalPagesElem.val()) {
currentPageElem.val(currentPageValue + 1);
}
//the first record on the current page
minItem = $(this).getMinItem(currentPageElem.val(), itemsOnPageElem.val());
minItemElem.val(minItem);
//the last record on the current page
maxItem = $(this).getMaxItem(currentPageElem.val(), itemsOnPageElem.val(), totalItemsElem.val());
maxItemElem.val(maxItem);
$(this).showItems(minItem, maxItem);
var pageHtml = $(".pages").html();
$(".pages").html($(this).newPageHtml(pageHtml, currentPageElem.val()));
}); });
$.fn.newPageHtml = function(pageHtml, currentPage) {
var idx1=pageHtml.indexOf("Pagina ");
var idx2=pageHtml.indexOf(" / ");
var prevPage = pageHtml.substring(idx1 + 7, idx2);
return pageHtml.replace(prevPage, currentPage);
};
This is the html code that involves the js:
<input type="hidden" id="totalPages" name="totalPages" value="${totalPages}"/>
<input type="hidden" id="currentPage" name="currentPage" value="${currentPage}"/>
<input type="hidden" id="minItem" name="minItem" value="${minItem}"/>
<input type="hidden" id="maxItem" name="maxItem" value="${maxItem}"/>
...
<div class="controls">
<a class="prev" id="prev"></a>
<a class="next" id="next"></a>
<span class="pages">
<fmt:message key="messages.page">
<fmt:param>${currentPage}</fmt:param>
<fmt:param>${totalPages}</fmt:param>
</fmt:message></span></div>

are you try in firefox or safari?
what is your java version?
are you review in about:config if you have enable java/javascript in Chrome

I have solved the problem. There was an issue with the CSS files that wouldn't allow the text to transform correctly in Google Chrome. So I modified the style of the span class from above like this:
<span class="pages" style = " position: absolute; ">
Initially, the position of the span class was relative. I think Chrome has a problem with this type of CSS.

Jquery - Construct a file name to load, using member's name from list item

I currently use Jquery to do the following. When you hover over a list item (member's listing) and click the review tab, the member's review page is loaded. With this setup, each list item has to have its own specific code, requiring more id tags and... manually entering the file name for the review page. I've been working on a code that is more general...one that constructs the file name to load on click.
I need the code to combine the folder name (which is the same for all review pages) with the first and last name of the selected member (folder/lastName,firstName.php). Forgive me for not knowing proper terms... I'm learning on my own:/ So far, this is what I have for the code. It does everything except load the file...
$('li.services').each(function(){
$('.proviewtab').click(function(e){
var name = $(this).find("p2").text();
name = name.split(" ", 2);
var firstName = name[0];
var lastName = name[1];
var folder = "reviews-pest-control-va";
var reviewsPath = folder + '/' + lastName + ',' + firstName + '.php';
reviewsFile = reviewsPath.replace(/ /g, '').toLowerCase();
e.preventDefault();
$('#insert').empty();
$('#insert').load(reviewsFile);
$('.lbox').removeClass('hbox');
$('.lbox').addClass('tempbox');
$('.mainflipper').addClass('top');
});
});
Here's the html. I'm trying to combine the folder name, last and first name for use with the load command.
<li class="services amelia chesterfield powhatan richmond sussex nottoway
greensville bugs bedbugs rodents bees reptiles">
<div class="lpic">
<div class="lbox hbox">
<div class="prolight"></div>
<div class="pro"><img src="http://integritycontractingofva.com/image/KimMedina.jpg" />
<p2>Kim Medina<br/>
(804) 381-8026<br />
Dodson Pest Control</p2>
<div class="proviewtab"><p3>Reviews</p3></div></div></div></div>
</li>
My test page using the above code and html http://integritycontractingofva.com/testpage.php
Here's a page on my site using my current code and html. It may give a better idea of what I'm trying to replicate. http://integritycontractingofva.com/Pest-Control-in-Chesterfield%2C-VA---Midlothian%2C-VA---Chester%2C-VA---Moseley%2C-VA.php
Thanks in advance for any help :^)
Edit I got it to work. When the "Reviews" button is clicked, the appropriate (closest) first and last name are combined to create the file name, which then loads.
The html
<li class="services amelia chesterfield powhatan richmond sussex nottoway
greensville bugs bedbugs rodents bees reptiles">
<div class="lpic">
<div class="lbox hbox">
<div class="pro"><img src="http://integritycontractingofva.com/image/KimMedina.jpg" />
<p>Kim Medina<br/>
(804) 381-8026<br />
Dodson Pest Control</p>
<div class="proviewtab"><p3>Reviews</p3></div></div></div></div>
</li>
The code
$('.proviewtab').click(function(e){
var name = $(this).closest(".pro").find("p").text();
name = name.split(/^(\w+)\s+(\w+)/);
var firstName = name[1];
var lastName = name[2];
var folder = "reviews-pest-control-va";
var reviewsPath = folder + '/' + lastName + ',' + firstName + '.php';
reviewsFile = reviewsPath.toLowerCase();
e.preventDefault();
$('#insert').empty();
$('#insert').load(reviewsFile);
$('.lbox').removeClass('hbox');
$('.lbox').addClass('tempbox');
$('.mainflipper').addClass('top');
});

Dynamic creation of tab with iframe

I am creating tabs dynamically when an user clicks a menu. The referenced html file is opened within a iframe which is also created dynamically.
Everything worked fine but When the tab count exceeds '3' and the user clicks on the previous tab the next iframe gets displayed below the previous iframe content.
Below is the code i used. Can anyone suggest what should i do ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<script text/javascript>
$(document).ready(function() {
var c=0;
$("#documents a").click(function() {
c++;
addTab($(this),c);
return false;
});
$('#tab1 a.tab').live('click', function() {
// Get the tab name
i = 0;
var chk;
var contentname = $(this).attr("id") + "_content";
var ifid=$("#content .dcontent:last iframe").attr("id");
// hide all other tabs
if(ifid>1)
{
for(i=ifid;i>0;i--)
{
fr = document.getElementById (i);
if (fr.style.display!='none')
{
fr.style.display="none";
}
}
}
//make the current frame visible
var lnm=$(this).attr("name");
fr = document.getElementById (lnm);
if (fr.style.display=='none')
fr.style.display="block";
$("#tab1 li").removeClass("current");
// show current tab
$(this).parent().addClass("current");
});
});
/* Creation of Tab*/
function addTab(link,ct) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tab1 li").removeClass("current");
if(ct>1)
{
for(i=ct-1;i>0;i--){
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
// add new tab and related content
$("#tab1").append("<li class='current'><a class='tab' id='" + $(link).attr("rel") + "' name='"+ct+"' href='" + $(link).attr("href") + "' target='" + $(link).attr("target") + "'>" + $(link).html() + "</a><a name ='"+ct+"' href='#' class='remove' >x</a></li>");
var e = $('<div class="dcontent" ><li style="list-style:none;"><iframe id="'+ct+'" src='+$(link).attr("href")+' name="content" align="middle" width=600px; height=400px;> </iframe></li></div>');
$('#content').append(e);
}
</head>
<body>
<ul id="tabs">
<!-- Tabs go here -->
<div style="float: left;">
<ul id="menu">
<li> Next
<ul id="documents">
<li><a href="tab1.html" target="content" rel="1" >Document4</a></li>
<li><a href="tab2.html" rel="2" target="content" >Document5</a></li>
<li><a href="tab3.html" rel="3" target="content" >Document6</a></li>
<li><a href="tab4.html" rel="4" target="content" >Document6</a></li>
</ul>
</li>
</ul>
</div>
</ul>
<ul id="tab1">
<div style="float: left;">
</ul>
<div id="content">
</div>

A major issue is the way your IDing your elements. You have a variable c which is numeric, starting at 0, increases whenever a link is clicked, and then is set as the ID as one of your iframes. However, you are also setting numeric IDs to the created tabs. Eventually, these element IDs will overlap and you will have errors like these.
At the very least, make your iframes have the ID of
"frame_" + $(link).attr("rel")
rather than the ct numeric variable you are using now (copy of c)
so that an example ID may be "frame_2" for the button with rel attribute of 2. That way you won't have a button with rel attribute of 2 connected to some frame with a random numeric ID.
Get rid of the c variable completely.
Instead of this loop:
if(ct>1) {
for(i=ct-1;i>0;i--){
alert(i);
fr = document.getElementById (i);
if (fr.style.display!='none')
fr.style.display="none";
}
}
use:
$("#content").children("div.dcontent").each(function() {
var theFrame = $(this).find("li iframe");
if ($(theFrame).attr("id") != ("frame_" + $(link).attr("rel"))) {
$(theFrame).css("display", "none");
}
});
That way you can easily link the rel attribute to the frame's ID, rather than an arbitrary numeric value from your c variable.
You should use your rel attribute for everything, since you've given your links that. You could use use something like data-buttonid and use .data() to access it, but that's up to you.
Then when you ID everything, use that number to pair everything together. i.e.
Frame ID: "frame_" + $(link).attr("rel")
Tab ID/Name: "tab_" + $(link).attr("rel")
A Name: "tab_anchor_" + $(link).attr("rel")
Testing with the code I provided resulted in it executing how you want.