i have two audio files with progress bar and both having same id:
<audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio>
</p>
<button class="btn btn-success btn-sm" id="play">
<svg style='font-size: 1.3em' class="bi bi-play-fill" width="1em" height="1em"
viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"/>
</svg>
</button>
<button class="btn btn-secondary btn-sm" id="pause">
<svg style='font-size: 1.3em' class="bi bi-pause-fill" width="1em" height="1em" viewBox="0 0 16 16"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 3.5A1.5 1.5 0 017 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zm5 0A1.5 1.5 0 0112 5v6a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>
</svg>
</button>
<progress style="height: 4px;border: none;width: 300px;max-width: 330px" id="seekbar" value="0" max="1">ssss
And Here's js
<script type="text/javascript">
$('#play').on('click', function() {
document.getElementById('player'.).play();
});
$('#pause').on('click', function() {
document.getElementById('player').pause();
});
$('#player').on('timeupdate', function() {
$('#seekbar').attr("value", this.currentTime / this.duration);
});
</script>
now i am able to play the first audio file but cannot play second file
how do i do that?????
if there's any other solution like looping ids or anything just tell me because i am a noob in js
document.getElementById only returns the first match, if you want to get all matches, use
document.querySelectorAll instead.
Here's how you should do it
$('#play').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.play());
});
$('#pause').on('click', function() {
[...document.querySelectorAll('#player')].forEach(e => e.pause());
});
As kerbholz mentioned, id should be unique. If it meant to have multiple instances, consider to use class instead.
Related
I have some dynamically added elements. I want to attach 'click' event on a specific class. But the problem is if I click on the child element it's not working. Here is my dynamically added elements.
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>
Here is my javascript code:
document.body.addEventListener('click', function (evt) {
if ( evt.target.classList.contains("step-del") ) {
alert(this)
}
}, false);
evt.target is what you click on. You are clicking on a child so it is not going to trigger on a parent. So you would need to look to see if what is clicked on is the element or is a child of that element. You can do that with .closest()
const stepDelElem = evt.target.closest(".step-del");
if (stepDelElem) {
console.log('here');
}
<svg> is a different creature than normal HTML tags. A simple solution is to prevent any mouse events to interact with the <svg> by adding the following to CSS:
svg {
pointer-events: none
}
The other changes are just recommendations.
document.getElementById('steps').addEventListener('click', function(evt) {
if (evt.target.matches(".step-del")) {
console.log(evt.target.className);
}
}, false);
a {
display: inline-block;
width: max-content;
border: 1px solid red
}
svg {
pointer-events: none
}
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
1
</a>
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>Step
2
</a>
</div>
</div>
Maybe the target is a child element of the "step-del", so you need to check with closest, which will search for the parent elements if any of them has "step-del" class.
document.body.addEventListener('click', function (evt) {
const del = evt.target.closest(".step-del")
if (del) {
alert(del)
}
}, false);
<div id="steps">
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 1
</div>
<div class="step">
<a class="btn step-del">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M12.277 3.763a.9.9 0 010 1.273L9.293 8.018l2.984 2.986a.9.9 0 01-1.273 1.272L8.02 9.291l-2.984 2.985a.9.9 0 01-1.273-1.272l2.984-2.986-2.984-2.982a.9.9 0 011.273-1.273L8.02 6.745l2.984-2.982a.9.9 0 011.273 0z"></path></svg>
</a>
Step 2
</div>
</div>
I'm trying to get an object from a table with python and selenium. However, first I need to click in the Goalscorers (table title) to show the table. The problem is that I can't click in any of the object, and there isn't any ref. So I can't understand what I need to do, all this div "are clickable" when I put the mouse on top of them, so not sure how it works, any idea?
I tried
driverBet.find_element(By.XPATH,"//div[contains(#data-test-market,'Goalscorers')]").click()
but it's not clickable, I tried also the data-test-id="rabMarkets" but it's not clickable.
<div data-test-id="rabMarkets">
<div class="_ty4a3m">
<div data-test-id="rabMarketsAccordion">
<div class="_1ufbuwwo ">
<div class="_1b7dz8zNaN">
<div class="_q76d6b">
<span class="_uywwi">
<div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-309" style="fill:#909DB4;height:18px;width:18px;" data-src="//bet.sbgcdn.com/static/assets/7200e23c7ae8f1778ea608e36e92b473.svg" class="injected-svg _uhlm2">
<title id="title-309">
Icon / Toggle / Outlined / Star
</title>
<path fill-rule="nonzero" d="M17.738 20.999a.716.716 0 0 1-.331-.082l-5.408-2.821-5.408 2.821a.717.717 0 0 1-.75-.053.704.704 0 0 1-.284-.692l1.033-5.976-4.375-4.232a.703.703 0 0 1-.18-.725.71.71 0 0 1 .575-.48l6.046-.873L11.36 2.45a.713.713 0 0 1 1.277 0l2.704 5.437 6.046.872a.71.71 0 0 1 .575.481.703.703 0 0 1-.18.725l-4.375 4.232 1.033 5.976a.705.705 0 0 1-.283.692.715.715 0 0 1-.42.135zM5 10l3.5 3.5-1 5 4.499-2.45 4.497 2.45-.996-5L19 10l-4.5-.5c-.155-.022-.988-1.522-2.501-4.5L9.5 9.5 5 10z" role="presentation">
</path>
</svg>
</div>
</div>
</span>
</div>
<div class="_zxe9qt">
<div class="_t0tx82" data-test-market="Goalscorers">Goalscorers</div>
<div class="_1cpli7v"></div></div><div class="_w81afw">
<span class="_uywwi">
<div><div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 9" width="15px" height="9px" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="title-1915" style="fill:#909DB4;height:14px;width:14px;" data-src="//bet.sbgcdn.com/static/assets/5c342ef89fd16eb91c0b8ddec4a2dcc0.svg" class="injected-svg _j30eqf _uhlm2">
<title id="title-1915">
icon-arrow-down
</title>
<path transform="translate(7.250000, 5.000000) scale(1, -1) rotate(90.000000) translate(-7.250000, -5.000000)" fill-rule="evenodd" d="m3 5.0033l7-7.0033 0.79289 0.79289c0.39023 0.39065 0.39032 1.0237 2.119e-4 1.4144l-4.7931 4.796 4.7927 4.7898c0.39085 0.3902 0.39104 1.0234 6.357e-4 1.414-7.06e-5 7.07e-5 -1.412e-4 1.413e-4 -4.238e-4 1e-7l-0.79289 0.79289-7-6.9967z" role="presentation"></path>
</svg></div></div></span></div></div></div></div></div></div>
thank you
You can access the element using the class, something like this:
This functions first check if the element with the class exists:
def check_exists_by_class_name(browser, classname):
try:
browser.find_element(By.CLASS_NAME, classname)
except NoSuchElementException:
return False
return True
Then, just use the function:
browser = webdriver.Chrome(service=service, options=options)
if check_exists_by_class_name(browser, '_t0tx82'):
print('Go on')
else:
print('not found')
I am trying to build a chrome extension to click an SVG on a webpage using the below command but it shows that "click" is not a function.
Can anyone give me some direction in order to solve this issue?
document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click();
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>
You can't really click an svg path but here is a solution:
const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path")
pathElem.onclick = () => console.log("clicked")
pathElem.dispatchEvent(new Event("click"))
pathElem.dispatchEvent(new Event("click"))
<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
<div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
<div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
<div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
<textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment" class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
</div>
<div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
<span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
</path>
</svg>
</span>
</div>
</div>
</form>
Note that .click() works with HTML but not SVG elements. MDN
Also note that the click event handler in your case is probably not listening on the path element but rather on the svg, div or span tag.
I need to change a backgroundColor of $('.category-edit .type')based on text changing.
i am getting the text from $('.organisation-options .organisation-option')and setting it on $('.category-edit .type').
just i need when the user click on "hotel" for example the div of $('.category-edit .type') changed text to hotel and backgroundColor also
$('.organisation-options .organisation-option').on("click", function(){
$(this).addClass('active').siblings().removeClass('active');
$('.category-edit .type').text($(this).text());
})
<div class="organisation-options">
<div class="organisation-option">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="32" viewBox="0 0 44 30">
<defs>
<path id="t70za" d="M4848.156 965.136c0-3.389 2.77-6.136 6.188-6.136 3.417 0 6.187 2.747 6.187 6.136 0 3.39-2.77 6.137-6.187 6.137-3.418 0-6.188-2.748-6.188-6.137zm27.844 22.5a1.37 1.37 0 0 1-1.375 1.364h-41.25a1.37 1.37 0 0 1-1.375-1.364 1.37 1.37 0 0 1 1.375-1.363h41.25c.76 0 1.375.61 1.375 1.363zm-31.625-6.818c.013-4.513 3.7-8.168 8.25-8.182h3.781c4.551.014 8.237 3.669 8.25 8.182v4.091h-20.28zm16.789-13.599c0-3.033 2.48-5.492 5.538-5.492 3.058 0 5.537 2.46 5.537 5.492 0 3.034-2.479 5.492-5.537 5.492-3.059 0-5.538-2.458-5.538-5.492zm7.383 6.71c4.071.012 7.367 3.282 7.381 7.319v2.297a1.37 1.37 0 0 1-1.375 1.364h-8.178v-5.454c0-1.674-.86-3.232-1.736-4.531a.633.633 0 0 1 .512-.996zm-33.164-6.71c0-3.033 2.479-5.492 5.537-5.492 3.059 0 5.538 2.46 5.538 5.492 0 3.034-2.48 5.492-5.538 5.492-3.058 0-5.537-2.458-5.537-5.492zM4832 983.545v-2.297c.011-4.039 3.308-7.31 7.38-7.323h3.386c.352 0 .704.025 1.052.075a.678.678 0 0 1 .488 1.05c-.825 1.272-1.65 2.785-1.65 4.405v5.454h-9.281a1.37 1.37 0 0 1-1.375-1.364z"></path>
</defs>
<g>
<g transform="translate(-4832 -959)">
<use fill="#769998" xlink:href="#t70za"></use>
</g>
</g>
</svg>
<span>Event agency</span>
</div>
</div>
<div class="buttons category-edit">
<div class="type" id="typeChanges">DMC</div>
</div>
There are a few ways do this. You could perhaps just change the style in jquery by either using an array or maybe adding a class - depends on how many items you have, and how much variety in color you want...
I've used an array in the snippet below (and different colours for each)
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
var myArr1 = ["Apple", "Pear", "Banana", "Avocado" , "Tomato"];
var myArr2 =['#336633', '#000055', "#005533", "#22FF33" , '#005500'];
var myval = $(this).text();
var index = myArr1.indexOf(myval);
$('.category-edit .type').text(myval);
if (myArr1.includes(myval)) {
$('.type').css('background-color', myArr2[index]);
} else {
$('.type').css('background-color', 'yellow');
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="organisation-options">
<li class="organisation-option">Apple</li>
<li class="organisation-option">Pear</li>
<li class="organisation-option">Banana</li>
<li class="organisation-option">Avocado</li>
<li class="organisation-option">Tomato</li>
</ul>
<div class="category-edit">
<div class="type"> </div>
</div>
You may need this
$('.organisation-options .organisation-option').on("click", function() {
$(this).addClass('active').siblings().removeClass('active');
// if old text is not same as new one, that is if text is changed,
if( $('.category-edit .type').text() !== $(this).text())
$('.category-edit .type').css("background-color", "yellow");
$('.category-edit .type').text($(this).text());
})
Hello i have a blog which get data via ajax request using jquery. This data contains posts with title and content. The content is added via summernote and we have image and text together. When i want to create html page for each post i do this with jquery
<script>
$(document).ready(function () {
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] === sParam) {
return sParameterName[1] === undefined ? true : sParameterName[1];
}
}
};
var id = getUrlParameter('id');
$.ajax({
type: 'GET',
url: 'http:///api/posts/' + id,
dataType: "json",
async: false,
data: {},
success: function (data) {
var posts = data.data;
$.each(posts, function (i) {
var $title = '';
var $content = '';
$.each(posts[i], function (key, val) {
if (key == 'title') {
$title = val;
}
if (key == 'content') {
$content = val;
}
});
var start = $content.indexOf('<img');
var end = $content.indexOf('">') - 1;
var addstyle = $content.indexOf('.jpg') + 2;
var myimage = $content.substr(start, addstyle) + ' ' + 'style="width: 970px;"' + '>';
var $target = $("#target");
$("#doc_title").append($title);
$("#title").append($title);
$("#img").append(myimage);
$("<p> </p>").append($content.substr(end + 3, $content.length - (end + 3))).appendTo($target);
});
}
});
});
</script>
<html>
<head>
</head>
<body>
<div class="container">
<h2 id="title"></h2>
<figure class="post-image" id="img">
</figure>
<div class="post-content" id="target"></div>
</div>
</body>
</html>
Also i have buttons for sharing article on social networks.
<h4>Share this article</h4>
<div class="sharethis-inline-share-buttons st-inline-share-buttons st-left st-has-labels st-animated"
id="st-1">
<div class="st-total st-hidden">
<span class="st-label"></span>
<span class="st-shares">
Shares
</span>
</div>
<div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m21.7 16.7h5v5h-5v11.6h-5v-11.6h-5v-5h5v-2.1c0-2 0.6-4.5 1.8-5.9 1.3-1.3 2.8-2 4.7-2h3.5v5h-3.5c-0.9 0-1.5 0.6-1.5 1.5v3.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
<div class="st-btn" data-network="twitter" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m31.5 11.7c1.3-0.8 2.2-2 2.7-3.4-1.4 0.7-2.7 1.2-4 1.4-1.1-1.2-2.6-1.9-4.4-1.9-1.7 0-3.2 0.6-4.4 1.8-1.2 1.2-1.8 2.7-1.8 4.4 0 0.5 0.1 0.9 0.2 1.3-5.1-0.1-9.4-2.3-12.7-6.4-0.6 1-0.9 2.1-0.9 3.1 0 2.2 1 3.9 2.8 5.2-1.1-0.1-2-0.4-2.8-0.8 0 1.5 0.5 2.8 1.4 4 0.9 1.1 2.1 1.8 3.5 2.1-0.5 0.1-1 0.2-1.6 0.2-0.5 0-0.9 0-1.1-0.1 0.4 1.2 1.1 2.3 2.1 3 1.1 0.8 2.3 1.2 3.6 1.3-2.2 1.7-4.7 2.6-7.6 2.6-0.7 0-1.2 0-1.5-0.1 2.8 1.9 6 2.8 9.5 2.8 3.5 0 6.7-0.9 9.4-2.7 2.8-1.8 4.8-4.1 6.1-6.7 1.3-2.6 1.9-5.3 1.9-8.1v-0.8c1.3-0.9 2.3-2 3.1-3.2-1.1 0.5-2.3 0.8-3.5 1z"></path>
</g>
</svg>
<span class="st-label">Tweet</span>
</div>
<div class="st-btn" data-network="pinterest" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m37.3 20q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3q-2.4 0-4.8-0.7 1.3-2 1.7-3.6 0.2-0.8 1.2-4.7 0.5 0.8 1.7 1.5t2.5 0.6q2.7 0 4.8-1.5t3.3-4.2 1.2-6.1q0-2.5-1.4-4.7t-3.8-3.7-5.7-1.4q-2.4 0-4.4 0.7t-3.4 1.7-2.5 2.4-1.5 2.9-0.4 3q0 2.4 0.8 4.1t2.7 2.5q0.6 0.3 0.8-0.5 0.1-0.1 0.2-0.6t0.2-0.7q0.1-0.5-0.3-1-1.1-1.3-1.1-3.3 0-3.4 2.3-5.8t6.1-2.5q3.4 0 5.3 1.9t1.9 4.7q0 3.8-1.6 6.5t-3.9 2.6q-1.3 0-2.2-0.9t-0.5-2.4q0.2-0.8 0.6-2.1t0.7-2.3 0.2-1.6q0-1.2-0.6-1.9t-1.7-0.7q-1.4 0-2.3 1.2t-1 3.2q0 1.6 0.6 2.7l-2.2 9.4q-0.4 1.5-0.3 3.9-4.6-2-7.5-6.3t-2.8-9.4q0-4.7 2.3-8.6t6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z"></path>
</g>
</svg>
<span class="st-label">Pin</span>
</div>
<div class="st-btn st-last" data-network="linkedin" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m13.3 31.7h-5v-16.7h5v16.7z m18.4 0h-5v-8.9c0-2.4-0.9-3.5-2.5-3.5-1.3 0-2.1 0.6-2.5 1.9v10.5h-5s0-15 0-16.7h3.9l0.3 3.3h0.1c1-1.6 2.7-2.8 4.9-2.8 1.7 0 3.1 0.5 4.2 1.7 1 1.2 1.6 2.8 1.6 5.1v9.4z m-18.3-20.9c0 1.4-1.1 2.5-2.6 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5 2.6 1.2 2.6 2.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
</div>
But when i want to share my page on facebook or linkedin i have problem. The title and the image doesn't display. How i can do this?
Hello i have i blog which get data via ajax request using jquery.
This is not a good design. Not only does it make your site inaccessible to clients which do not run Javascript -- like the tools used by social networking sites to extract page information and graphics! -- but it will also increase the load time of your site, as two HTTP requests must be made to start loading any content.
The problem you are having is inherent to this design. Reconsider it.