I have the following code :
<a id="plop" data-lightbox="image-1" data-title="aaa" href="https://unsplash.it/300/300">
<img src="https://unsplash.it/100/100" alt="" />
</a>
I want to change the "data-title" from "aaa" to "bbb" using something like this :
$('#plop').data('title','bbb');
But when I click on the link, the lightbox displays the old title :-/
How can I update the title with the new value ?
Thanks
Lightbox reads the attribute and not the jQuery data store.
To update the title, try the following: $('#plop').attr('data-title', 'bbb').
Related
I have some text which I'd like to be clickable.
And I want the picture to be opened when I click the certain word in a new window (not in a new tab).
How could I do that? The code below does not work.
<p>Click on the "Request Access" button and fill in the form.</p>
<a href="IMAGE_URL" target="_blank">
<img alt='img_path' class='img-40 rounded-circle' src='IMAGE_URL' />
</a>
Just add a target="_blank" to your link if you want to open the destination of a link in a new tab:
Request Access
And define a onClick method to open it in a window :
<a href="./images/TheForm.jpg"
onclick="window.open('./images/TheForm.jpg',
'windowName',
'width=800, height=600');
return false;"
>Request Access</a>
When you specify the width/height, it'll open the link in a new window instead of a tab.
Here is the documentation for further information.
I am trying to find out css selector for "Clear" button, as mentioned in below script:
<a href="" class="slds-button slds-button--neutral search-button"
ng-click="vm.clearFilter()" style="">Clear</a>
I have tried :
a[href*="Clear"]
a:contains('Clear')
a[*'Clear'*]
I am expecting to get a click on "Clear" button.
If your are trying to reach that button with the text, then it's not possible.
How about putting an id:
a#clearButton{
background:red
}
<a href="" id="clearButton" class="slds-button slds-button--neutral
search-button">Clear</a>
I see you use AngularJS, the id can be added via the code
driver = webdriver.PhantomJS()
driver.get(url)
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
driver.find_element_by_css_selector('a.btn_more').click()
I am able to click the get more link using above code
get more
but how to click on followers link?
<div class="my_show__info">
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="followers"> 90</a>
<a class="my_show__link j_get_follow" href="javascript:;" data-follow="following"> 33</a>
</div>
you can form a xpath and click on the link as mentioned below. if you want using CSS. convert the following xpath with css.
driver.findElement(By.Xpath("//div[#class='my_show__info']/a[#data-follow="followers"])).click()
I am not good with CSS but I guess following should work.
driver.find_element_by_css_selector('div[class='my_show__info']>a[data-follow='followers']').click()
An image is being shown. On clicking the image a pdf file should open in a new tab. This is how I am trying to render the React component, doesn't work -
<a href={pdfUrl} target="_blank">
<img className="class-image" src={imageUrl} onError={imgError}/>
</a>
When the image is clicked Chrome gives a warning that a pop-up has been blocked. Safari doesn't even give any warning and just eats the tab which it thinks is a pop-up.
I tried removing the onError attribute with no effect.
If I remove the target="_blank" attribute it works fine, opens the pdf in same window.
I have tried adding onClick handler to the <a> tag, opening a window using window.open with the same result - generates warning that a pop-up has been blocked.
This works fine however -
<a className="class-name" href={pdfUrl} target="_blank">{userName}</a>
The problem occurs if rather than rendering text as the content of anchor tag I render an image. Can't figure it out.
EDIT:
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to change the pointer to a cursor so that it looks like a link
I got it to work like this -
<img className="class-image" src={imageUrl} onError={imgError} onClick={() => {functionThatOpensWindow()} }/>
Add an onClick handler to the img tag
Update the image class to
change the pointer to a cursor so that it looks like a link
One approach that might work with this is to open the new window, then populate the URL:
const newWindow = window.open();
newWindow.location.href = '/some/url';
Im trying to create a button in jquery mobile only with a image and no text, as far as able to do is to add a data-icon, But i have i feeling it could be done better.
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
You can create button with only images :
<img style="height: 40px; width: 40px;" id="newid" data-role="button" src="source\images\greenplus.png" data-iconpos="notext" data-theme="a" />
data-iconpos="notext"
is indeed the right-way ahead for you to create a button with no text, but image only.
But i would change the onclick function that you have written. Instead of :
<a onclick="newfunction();" data-icon="plus" data-iconpos="notext" ></a>
Try out :
<a class="plus_button" data-icon="plus" data-iconpos="notext" ></a>
Since you are using jquery, use maximum jquery and your function would be :
$(".plus_button").click(function(){
//something here
});
Cheers.