Develop Reference

How to copy the href link of an anchor to other anchor?

I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});

Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>

Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});

Page flickering in chrome - bootstrap & jquery conflict

I am having an issue of my webpage flickering/blinking randomly, this happens in chrome, I have not yet tested other browsers.
I figured that this issue should be due to bootstrap.js & jQuery.js conflict because if I remove one of these then it does not blink no more, it doesn't matter which one I remove.
I tryed to use the jquery-noConflict() method but either I don't know how to use it properly or it did not wok for me.
But removing both any of them is not an option because some of the websites features are not working then.
I have recorded how it looks while it flickers:
removed
It is hard for me to describe the problem when I am limited to uploading images and links as I am a new member of stackoverflow, as I can only post 2 links, I'll post the link of the website, so if anybody can help me they can look over the source code there freely - http://removed
I am using jquery-1.11.0.min.js and bootstrap.min.js
This is one of the blocks that flickers:
<section id="privalumai" class="container">
<div class="row">
<div class="col-md-12 title">
<h2>Privalumai</h2>
<span class="underline"> </span>
</div>
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Draudimas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra apdraustos tiek KASKO, tiek privalomuoju ( TPVCA ) draudimu. Kasko draudimo galiojimo teritorija – geografinė Europa, o TPVCA – „žaliosios kortelės“ sistemos ribose.
Jums pageidaujant, galime pasiÅ«lyti ir vykstanÄių į užsienį kompleksinį kelionÄ—s draudimÄ… ( pvz. vykstant slidinÄ—ti ir pan.)<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Mobilumas</h3>
<div class="clearfix"></div>
<p class="service-content">Visos mūsų transporto priemonės yra naujos ir yra aprūpintos tiek pilna gamintojo garantija, tiek techninės pagalbos kelyje paslauga, todėl tiek avarijos ar techninio gedimo atveju Jums bus suteiktas pakaitinis automobilis ir pasirūpinta Jūsų kelionės pratęsimu.<br/><br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Neribotas kilometrų kiekis</h3>
<div class="clearfix"></div>
<p class="service-content">Mes suprantame savo klientų poreikius, todėl neribojame jų nuvažiuoto kilometrų kiekio.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInRight" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title">Nauji automobiliai</h3>
<div class="clearfix"></div>
<p class="service-content">Mūsų transporto priemonės yra naujos ir sukomplektuotos taip, kad Jums būtų patogu ir lengva keliauti.<br/><br/></p>
</div>
</div>
<!-- Service Box end -->
</div>
</section>
I am really lost here and now sure how would I go about fixing this. I would really appreciate if somebody would point me at the right direction. If there aren't enough resources or anything else please comment and I will supply them and reply to all of your answers!

Does adding this to your flickering element solve it?
.flickeringElementFix {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
It could be that there's some element manipulation going on in one or both of your scripts that are arguing
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp

How to add JS for Jquerymobile Dynamic ID in Collapsible Sets

I have a dynamic list showing collapsible set. It will generate different sets with id="selection_product_info_xxxx" xxxx=dynamic product id.
<div data-role="navbar">
<ul>
<li><font class="tab_font02">Product 810 Info</font></li>
<li>Product 810 Info 2</font></li>
</ul>
</div>
<!-- Tab End -->
<div data-role="collapsible-set">
<!-- Tab01 Start -->
<div data-role="collapsible" id="selection_product_info_810" data-collapsed="false">
<h3 class="display-none">product 810 info</h3>
<div>Test</div>
</div>
<!-- Tab01 End -->
<!-- Tab02 Start -->
<div data-role="collapsible" id="selection_product_info2_810">
<h3 class="display-none">product 810 info 2</h3>
<div>text 2</div>
</div>
<!-- Tab02 End -->
</div>
<div data-role="navbar">
<ul>
<li><font class="tab_font02">Product 820 Info</font></li>
<li>Product 820 Info 2</font></li>
</ul>
</div>
<!-- Tab End -->
<div data-role="collapsible-set">
<!-- Tab01 Start -->
<div data-role="collapsible" id="selection_product_info_820" data-collapsed="false">
<h3 class="display-none">product 820 info</h3>
<div>Test</div>
</div>
<!-- Tab01 End -->
<!-- Tab02 Start -->
<div data-role="collapsible" id="selection_product_info2_820">
<h3 class="display-none">product 820 info 2</h3>
<div>text 2</div>
</div>
<!-- Tab02 End -->
</div>
In order to make the button work, right now I need to add the event as follow in javascript by hard coding all product IDs. Is anybody know how I can rewrite the following scripts which makes the product id dynamically work and expand the relevant div under the product instead of hard coding the product id?
Remark: we are using jquery.mobile-1.3.2 and jquery-1.9.1.min.js
$("#expand_product_info_810") .on("click", function() {$("#selection_product_info_810").trigger("expand");})
$("#expand_product_info_820") .on("click", function() {$("#selection_product_info_820").trigger("expand");})
$("#expand_product_info2_810") .on("click", function() {$("#selection_product_info2_810").trigger("expand");})
$("#expand_product_info2_820") .on("click", function() {$("#selection_product_info2_820").trigger("expand");})

Update
From your new information, this cant work, as you couldnt keep the pattern you gave:
id="selection_product_info_xxxx" xxxx=dynamic
should be:
id="selection_product_infox_xxxx" x_xxxx=dynamic
SO! You have to do it like this then!
$("a[id^='expand_product']").on("click", function(){
var tmp = $(this).attr("id").split("_");
var id = tmp[2] + "_" + tmp[3];
$("#selection_product_" + id).trigger("expand");
});
http://jsfiddle.net/rb9Rv/
if you have control over the generated HTML, this would be smarter:
<ul>
<li><a data-tab="info_810" class="clickButton ui-btn-active" href="#" id="expand_product_info_810" data-theme="c" ><font class="tab_font02">Product 810 Info</font></a></li>
<li><a data-tab="info2_810" class="clickButton" href="#" id="expand_product_info2_810" data-theme="c" ><font class="tab_font02">Product 810 Info 2</font></a></li>
</ul>
$("a.clickButton").on("click", function(){
$("#selection_product_" + $(this).attr("data-tab")).trigger("expand");
});
http://jsfiddle.net/ctMtA/
Assuming that button, is a <button>, you could do it like this:
$("button[id^='expand_product_info_']").on("click", function(){
var id = $(this).attr("id").split("_")[3];
$("#selection_product_info_" + id).trigger("expand");
});
If it still dont work, you have to do some debuging like so:
$("a[id^='expand_product_info_']").on("click", function(){
alert("click works!");
var id = $(this).attr("id").split("_")[3];
alert(id);
$("#selection_product_info_" + id).trigger("expand");
});
i made quick fiddle for you, but the trigger expand didnt work, also with fixed id's like you said. This seem to changed in version 1.4, if you have 1.4, try this:
$("a[id^='expand_product_info_']").on("click", function(){
var id = $(this).attr("id").split("_")[3];
$("#selection_product_info_" + id).collapsible("expand");
});
working fiddle:
http://jsfiddle.net/5pyvy/2/

Hide certain xml using Javascript

Anyway to display some li tags while hiding some using Javascript? I'm sorry if my question doesn't make sense.
Let me write my codes here.
XML:
<array>
<words>
<name>Milk</name>
<background>Background of Milk</background>
<recipes>Recipes using Milk</recipes>
</words>
<words>
<name>Tree</name>
<background>Background of Tree</background>
<recipes>NIL</recipes> or Not Applicable
</words>
</array>
Script/Javascript:
<script>
var wordsName, wordsBG, wordsRecipes, wordsCurrent;
var wordsArray = new Array();
$.ajax({
type:"GET",
url:"words.xml",
dataType:"xml",
success:function(xml)
{
$(xml).find('words').each(function() { //find <words> in words.xml
wordName = $(this).find('name').text();
wordBG = $(this).find('background').text();
wordRecipes = $(this).find('recipes').text();
$('<li>'+threatsName+'</li>').appendTo("#testingList");
threatsArray.push({threatsName:threatsName, threatsBG:threatsBG, threatsCases:threatsCases});
})
$('#threats li').click(function(){ //li
wordsCurrent = $(this).index()
$('#description h1').text(threatsArray[wordsCurrent].threatsName);
$('#name').text(threatsArray[wordsCurrent].threatsName);
var backgroundInformation = wordsArray[wordsCurrent].wordsBG;
backgroundInformation = backgroundInformation.split("\\n"); //to clear the line
$('#backgroundInfo').empty(); //empty the things inside
for (x in backgroundInformation) { //starts from zero and go to the last object
$('#backgroundInfo').append(backgroundInformation[x]+ '<br />');
} //for loop CLOSE
var recipesInformation = wordsArray[wordsCurrent].wordsRecipes;
recipesInformation = recipesInformation("\\n"); //to clear the line
$('#recipesInfo').empty(); //empty the things inside
for (x in recipesInformation) { //starts from zero and go to the last object
$('#recipesInfo').append(recipesInformation[x]+ '<br />');
} //for loop CLOSE
})
}
</script>
Lastly, my HTML
<div data-role="page" id="menu">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>
<h3>Words</h3>
</li>
<li>
<h3>Not Available</h3> <!--Not Available-->
</li>
</ul>
</div>
</ul>
</div>
<div data-role="content"> <!--Start of DESCRIPTION content-->
<ul data-role="listview" id="informationList">
<li>
<h3>Background</h3>
</li>
<li>
<h3>Recipes</h3>
</li>
</ul>
</div> <!--End of DESCRIPTION content-->
</div> <!--End of DESCRIPTION-->
<div data-role="page" id="background"> <!--Start of BACKGROUND-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of BACKGROUND content-->
<p id="backgroundInfo">Not Available</p>
</div> <!--End of BACKGROUND content-->
</div> <!--End of BACKGROUND-->
<div data-role="page" id="recipes"> <!--Start of RECIPES-->
<div data-role="header">
<h1>Background</h1>
</div>
<div data-role="content"> <!--Start of RECIPES content-->
<p id="recipesInfo"> Recipes</p>
</div> <!--End of RECIPES content-->
</div> <!--End of RECIPES-->
As the information above, the second element in the Array, Tree, does not have any information for recipe tab, how can I prompt the page when user clicks into Tree, recipe li will hides itself?
Many thanks. It's the first time I am sending a question.

Welcome to StackOverflow! You seem to be parsing XML and generating HTML dynamically using JavaScript. In your case, maybe the easiest way is to detect the condition during parsing and add a "class" attribute to your <li> nodes. Then define the style class somewhere in your CSS, like this:
<li class="no-recipe">blah blah blah</li>
<style>
li.no-recipe {
display:none;
}
</style>
Not sure what you're aiming for exactly, but a declarative approach is almost always better than a dynamic approach (using JavaScript).

Generate link based on data attributes

I am trying to write a little jQuery script that checks a set of div's to see if they have a data-name attribute. For the ones that have a data-name, it will create a link. The href of that link should be the name of the data-value plus contain the file extension (eg. .txt).
Everything seems to work OK except when I try to add the data value onto the link. The ultimate result of this script is to output something like this for each of those div's:
<p class="data-link">Edit
Below is my script. I have identified that area that I am having issue with.
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = "" + $(this).attr("data-name");
$(this).prepend("<p class='edit-link'><a>Edit</a></p>");
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', <<stuck_here>>);
});
});
Any help will be great.
Thanks
As requested, here is my sidebar HTMl structure
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>

I don't know why you are using a second loop to add the HREFs when you already have everything you need.
Working fiddle here: http://jsfiddle.net/Q4j8S/.
HTML:
<div id="desktopSidebar">
<div class="sidebar userbox">
<h3 class="sidebarheader"> Welcome {{username}}}</h3>
</div>
<div data-name="social_media_sitewide" class="sidebar socialmedia">
<h3 class="sidebarheader">Follow Tennis-Chat</h3>
</div>
<div data-name="site_promotions" class="sidebar promotions">
<h3 class="sidebarheader">Current Promotions</h3>
</div>
<div data-name="livescores" class="sidebar Livescores">
<h3 class="sidebarheader">Live Scores</h3>
</div>
<div class="sidebar tournaments">
<h3 class="sidebarheader">Tournaments</h3>
</div>
<div data-name="featured-profiles" class="sidebar profiles">
<h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
</div>
<div data-name="side_advertisment" class="sidebar Advertisement">
<h3 class="sidebarheader">Advertisement</h3>
</div>
<div class="sidebar Headlines">
<h3 class="sidebarheader">Tennis-Chat Headlines</h3>
</div>
<div class="sidebar mostrecent" id="mostRecentTopics">
<h3 class="sidebarheader">Most Recent Posts</h3>
</div>
</div>
JavaScript:
var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
var dataNameWrappers_action = $(this).attr("data-name");
console.log('data-name ' + dataNameWrappers_action);
$(this).prepend('<p class="edit-link">Edit</p>');
/* Don't need this
var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
dataNameWrapperEditLink.each(function() {
$(this).attr('href', dataNameWrappers_action);
});
*/
});

Instead of iterating through the a tags after you do the prepend, it may be better to make the HTML fragment with the desired href attribute.
Here is the code that accomplishes that:
$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
var href = $(el).attr('data-name') + ".txt";
$(el).prepend('<p class="edit-link">Edit');
});