Dynamic Facebook share button via jQuery - javascript

HTML:
<div class="views-row views-row-2 views-row-even">
<div class="sonuc">
<span>lorem ipsum dolor sit amet</span>
</div>
<div class="views-field views-field-nothing">
<span class="field-content">Share</span>
</div> <div class="sonucbg"></div>
</div>
<div class="views-row views-row-2 views-row-even">
<div class="sonuc">
<span>lorem ipsum dolor sit amet 2222</span>
</div>
<div class="views-field views-field-nothing">
<span class="field-content">Share</span>
</div> <div class="sonucbg"></div>
</div>
JS:
$('#share').click(function() {
var product_name = jQuery(".sonuc span").html();
FB.ui({
method: 'feed',
name: product_name,
}, function(response) {
if(response && response.post_id){}
else{}
});
});
When I click my .share button, get popup, its OK. But I want, e.g. click first share button, get that text.
How can I do it?

You need to isolate the instance of .sonuc span within the views-row instance based on which button was clicked
Try this:
$('.share').click(function() {
var product_name = $(this).closest('.views-row').find(".sonuc span").html();
/* FB code */
});
What you currently have will always get the html from the first .sonic contained in the page

Related

Manipulate content # for all div elements (with role="tabpanel") - style="display: none;" to display: block;

How to manipulate a website to change all
div elements (with role="tabpanel") - style="display: none;" to style="display: block;"
via class="accordionItemContent" could be possible as well
I would like to see the whole page/div elements with total content (so it doesn't matter is the manipulation is via JS or CSS .. or jquery)
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;"></div>
Because the page is behind a login probably a change via site inspect/console would be one way to go.
Update
I have been to fast when writing about "display"
if "block" it only shows a frame without content
I saw that there is another main difference in the element shown vs all other hidden once:
<h1 class="uiaccordion" role="tab" a-exp="false" a-sel="false" tabindex="-1"><a href="#" id="manage_content_11_ac" tabindex="-1"></div>
<h1 class="uiaccordion" role="tab" a-exp="true" a-sel="true" tabindex="0"> <a href="#" id="manage_content_12_ac" tabindex="-1"></div>
-> How to see/activate the content as well?
jQuery...
$("div[role='tabpanel']").show();
or...
$('.accordionItemContent').show();
Run this in console
document.querySelectorAll('div.accordionItemContent.accordion.ui-reset.widget.uibottom[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
Edited for edited question, only using class accordionItemContent
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
To change the other attributes as mentioned in the update:
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
e.setAttribute(“tabindex”, 0) // Use this syntax to change all effected attributes
});
One approach could be creating a generic CSS class to hide elements and add/remove it to the element(s) you want to hide/show:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => elem.classList.remove('hide'));
}
.hide {
display: none;
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV3: Lorem ipsum dolor sit consecutor amet</div>
If you prefer to stick with inline CSS, instead, you can modify the code above in this way:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => {
elem.style.display = 'block';
/*
* NOTE: if the inline style contains only the display property,
* you could even entirely remove it:
*
* elem.removeAttribute('style');
*/
});
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV3: Lorem ipsum dolor sit consecutor amet</div>

jQuery - Append() is not working to add a button on Clicking an element

jsfiddle: https://jsfiddle.net/gkmuhfqt/1/
As you can see on jsfiddle, I made a Readmore text that can be clicked and it's for some functions.
Using jQuery, I tried to add a button through clicking the Readmore text that uses the append() function.
But it did not work.
Why does my Readmore text click not work at all in append()- to add some button?
I want to add hello button through clicking readmore text.
Where is my problem? How can I fix it?
-Edit-
html :
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4" style="border:0.5px; border-style: solid;">
<div class="media">
<div class="media-left media-top" style="">
<img src="https://6dbaudio.files.wordpress.com/2013/08/imgp0746.jpg" class="media-object pull-left img-circle" style="width:70px; height:70px;">
</div>
<div class="media-body" style="">
<p><h4 class="media-heading">hello</h4></p>
<p class="readmore_as_p">Lorem ipsum dolor sit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consesit amet, consectetur.
</p>
</div>
</div>
</div>
javascript:
$(".readmore_as_p").each(function () {
var original_str = $(this).text();
console.log("hi");
if (original_str.length>20) {
var subtracted_str = original_str.substr(0, 20);
var p_plus_readmore_str = '<p class="readmore_before" data="' + original_str + '">' + subtracted_str + '...</p>';
var link_read_more = '<a class="read_more"><p>Read more</p></a>';
$(this).parent().children('p.readmore_as_p').html(p_plus_readmore_str+link_read_more);
$('.read_more').click(function () {
var originaltext = $(this).parent().children('p.readmore_before').attr('data');
$(this).parent().html(originaltext);
//Here is problem starting. What i ask is here.
var text = '<div class="media" style="">\n' +
' <div class="media-body text-center" style="">\n' +
' <button class="btn btn-warning" style="">hello</button>' +
' </div>\n' +
' </div>\n';
$(this).parent().parent().append(text);
//To here
});
}
else {
}
});
The issue is that
$(this).parent().html(originaltext);
removes the element that "this" refers to so $(this).parent().parent() doesn't have a context to get parent from.
You can fix this by moving that line to under the add button line, ie:
$(this).parent().parent().append(text);
$(this).parent().html(originaltext);
Updated fiddle: https://jsfiddle.net/gkmuhfqt/2/
As an extra: $('.read_more').click(function () { should be $('.read_more', this)... or move that outside the $(".readmore_as_p").each
$(this).parent().parent().append(text);
Parent element is not defined, because original $(this) (which is after debugging - a Read more link) is overwritten by your text, so there is no parent for not existing element in DOM.
Updated fiddle
It is better to create an anchor for original container:
var _t = $(this);
and use it later for appending of elements:
_t.append(text)
Nesting of parent().parent() is not very good practice.

Jquery how to find element from outside

I would like to find an element which is outside from element which I'm trying click.
I need to click #form-1 and slideToggle .business-form-kaufen.
You can look hierarchy in the picture.
Thanks for help!
You need to go up two DIV levels from the button, then go to the next DIV, and find .business-form-kaufen in there.
$(".button").click(function() {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
Use .parent() relatively
$("#form-1").on("click", function(evt) {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
Or if you can either edit your html to add some id to the .business-form-kaufen or be sure that it is only this single element of this class, you can do it much simpler:
$("#form-1").on("click", function(evt) {
$(".business-form-kaufen").slideToggle();
// $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
I assume form and business-form-kaufen are 1 to 1 relationship? I'd put them together in a container and use parents() to find the container and then find() to look for the business-form-kaufen.
This way, the code is smart enough to look for the business-form-kaufen without the need to hard code the DOM structure.

Make a slider dynamic

I would like to make a slider dynamic. I am using Slider Pro.
Here my structure :
jQuery
$(".item-0").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 0);
});
$(".item-1").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 1);
});
$(".item-2").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 2);
});
$(".item-3").mouseover(function () {
$('#carousel').sliderPro('gotoSlide', 3);
});
HTML :
<div class="slider-pro" id="carousel">
<ol class="carousel-menu">
<a class="item-0" href="#carousel/0">
<li>Yatching</li>
</a>
<a class="item-1" href="#carousel/1">
<li>Aviation</li>
</a>
<a class="item-2" href="#carousel/2">
<li>Automobile</li>
</a>
<a class="item-3" href="#carousel/2">
<li>Watchmaking</li>
</a>
</ol>
<div class="sp-slides">
<!-- Slide 1 -->
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg" />
</div>
<!-- Slide 2 -->
<div class="sp-slide">
<p>Lorem ipsum dolor sit amet</p>
</div>
<!-- Slide 3 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
<!-- Slide 4 -->
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
</div>
</div>
I would like that on an hover on each "a" of the .item-0 we go to the slide 0, .item-1 go to the slide 1, .item-2 go to the slide 2 etc.... So I tried something more dynamic :
$('.item-' + i).each(function () {
$(this).mouseover(function () {
$('#carousel').sliderPro('gotoSlide', i);
});
});
Use common class item to all the elements instead of item-n, if not possible you can use attribute starts with selector $('[class^=item]') to select all the elements whose class selects with item. I would also recommend to use it as $('#carousel').find('[class^=item]') to avoid selecting other matching elements on the page.
Instead of repeating the code for all the elements individually, add common event handler with index as follow:
$('[class^=item]').mouseover(function () {
$('#carousel').sliderPro('gotoSlide', $(this).index());
});

jQuery append current div

I have an outter div .listingContainer, I have about 10 of these on the page all with different content in them. When I click the inner div .saveCompare I want to get the html off all the .listingContainer using jQuery var htmlStr = $(this).html();
I am finding it difficult getting the html of the clicked div, I tried .parent and such and it does not seem to work.
Would be grateful if someone point me to the correct dom call, thanks.
<div class="listingContainer grid_9 alpha omega">
<a class="listContent" href="adContent.html">
<div class="listingWrapper">
<div class="grid_8 alpha omega">
<div class="listingContent">
<div class="imgHolder">
<img src="imgs/cars/SearchThumb-10053319.jpg" width="100" height="75">
</div>
<div class="descHolder">
<div id="doneDeal"></div>
<h3>Fancy Car</h3><div class="saveCompare"><strong>+</strong> Compare</div>
<p>Lorem ipsum dolor sit amet, pri ex duis maiorum commune, illud viderer suscipiantur eam an. Dolorum recteque qui in. Pro inani nulla tacimates ex, qu</p>
<span class="listingPrice"><strong>€4,000</strong></span>
<span class="listingDate">Listed: <strong>Today</strong></span>
<span class="listingLocation">Co. Waterford</span>
<span class="listingViews">Viewed: 20 Times</span>
</div>
</div>
</div>
<div class="goTo goTo_unfocus grid_1 alpha omega">
<div class="gotoWrapper">
Click to View
<div class="imgVeiw"></div>
</div>
</div>
</div><!--End listingWrapper-->
</a>
</div>
To get the first parent that matches a specific selector, starting from an element going up, you can use .closest:
$(this).closest(".listingContainer");
This should accomplish what you are asking:
$(".saveCompare​​​").click(function() {
alert($(this).closest(".listingContainer").html());
});​​
$(".saveCompare").click(function(ev){
var listEl = $(this).parents(".listingContainer").first();
//Do what ever you want with listEl. For example listEl.html() ..etc;
});
$(".saveCompare").parents(".listingContainer"​​)​.get(0)
$('.saveCompare').click(function() {
$(this).parents('.listingContainer:first');
});
.listContent is an anchor tag and all the elements inside that. I'm not sure you will get "$('.saveCompare').click". Check this link
http://jsfiddle.net/Zh7HN/1/

Categories