I just can't get the quoting to work properly in my template. I know I could generate the link in the client side JavaScript, but I think it would make sense to do it directly in the template.
My code looks like below and my target is to make the div clickable:
<div class="thumbnail" onclick="window.location = {{pathFor 'viewSailboatAd' _id}}">
This renders:
<div class="thumbnail" onclick="window.location = /ads/sailboat/yXbWorY3295RdevnQ">
That won't work as we need quoting around the value like this:
<div class="thumbnail" onclick="window.location = '/ads/sailboat/yXbWorY3295RdevnQ'">
How could I achieve this?
That works :
<div class="thumbnail" onclick="window.location = '{{pathFor "viewSailboatAd" _id}}'">
Why not making the thumbnail an anchor in the first place ?
Bootstrap .thumbnail class plays nicely when used as a link.
<a class="thumbnail" href="{{pathFor "viewSailboatAd" _id}}">
{{! ...}}
</a>
Related
I have an eCommerce page of products with some small thumbnails below. When I mouse moused over a thumbnail I want to swap the different variation image into the product image. I have this working using the code below but I assume this isn't the best way to do this? Can anyone suggest a better way for me to grab the "product-image" src= tag and update it? The number of parent / child calls I've used to set the right data seems excessive.
Thanks in advance. Tim
<script>
$(document).ready(function(){
$('.nSwatchProduct').hover(function(){
var newSource = $(this).attr('data-variation-image');
$(this).parent('._itmspec_listitm').parent('.nColourSwatch').parent('.categoryswatch').parent('.caption').parent('.thumbnail').children('.thumbnail-image').children('.product-image').attr('src', newSource);
});
});
</script>
web page hierarchy
<div class="thumbnail">
<a href="https://www.website.com/productpage" class="thumbnail-image">
<img src="/assets/thumbL/imagename.jpg" itemprop="image" class="product-image" alt="" rel="itm">
</a>
<div class="caption">
<div class="nColourList categoryswatch">
<a class="_itmspec_lnk thumbnail nColourSwatch" href="https://www.website.com/productpage" ref="1_83" data-toggle="tooltip" data-placement="top" title="" data-original-title="Blue">
<div class="_itmspec_listitm" ref="1_83">
<img class="nSwatchProduct" src="/assets/thumb/variationimage.jpg" alt="Blue" data-variation-image="/assets/thumb/variationimage.jpg">
</div>
</a>
Use .closest to select nearest common parent and then .find that element you need
$(this).closest('.thumbnail').find('.thumbnail-image .product-image')
So I have a number of dropdown links on my main navigation that need to link to other landing pages and scroll or show specific part of that page, like an article or a specific service. I have went through a lot of examples here but can't get this to work:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data#broadband/'">BROADBAND & MANAGED INTERNET</a>
The above link should anchor to this div on another page:
<div class="row broadband-block" id="#broadband">
At the moment it lands on the page it needs but doesn't go to the anchor div that it's supposed to,but it does add #broadband to the url in the browser. What am I doing wrong and what would be the best solution, as I have quite a few links like that to do?
Your problem is the ID attribute. Remove the # from your ID and it should fix your problem:
<div class="row broadband-block" id="#broadband">
<div class="row broadband-block" id="broadband">
Or adjust your 'a' tag and add an extra '#' to the front of your url:
<a class="dropdown-item" href="#" onclick="location.href = '/voice-data##broadband/'">BROADBAND & MANAGED INTERNET</a>
Also, javascript onclick not needed unless this is what your application environment requires, it can all be done inside href attribute.
you should do this
<a class="dropdown-item" href="/voice-data/#broadband">BROADBAND & MANAGED INTERNET</a>
just use the href instead of onclick.
and the ids should match, at the current state you should be using ##broadband
while you should use the id as follows:
<div class="row broadband-block" id="broadband">
Edit: #pointy pointed it out (no pun intended)
I have a Bootstrap website with a navigation like this:
<a href="">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/messages-grey.svg">
</div>
<div class="panel-footer panel-categories-footer-small">
Messages
</div>
</div>
</a>
And the icons are all named like this:
<img src="img/messages-grey.svg">
<img src="img/messages-blue.svg">
<img src="img/settings-grey.svg">
<img src="img/settings-blue.svg">
I already got the 'Messages' part to change colors with CSS, but I also need to make the .SVG icons to change from "-grey" to "-blue" whenever someone hovers over the linked DIV. How would I achieve this? Possibly with CSS and if not, jQuery?
It is not possible to change the src attribute of an img using CSS.
You can use Javascript, however. Doing it with jQuery makes it quite simple:
$("a").hover(function () {
$(this).data("originalImage", $(this).attr("src"));
$(this).find("img:first").attr("src", "path-to-new-img.svg");
}, function () {
var original = $(this).data("originalImage");
$(this).find("img:first").attr("src", original);
});
try using
a:hover{
background-image:url(img/messages-blue.svg);
}
in the css.
trying to figure out how to add onclick="location.href='link.html'". so that when the user clicks on image it will take the user to a url.
Just not sure how to include this in the code below. Here is my code...
<a class="thumbnail even"
onClick="_gaq.push(['_trackEvent', 'holiday', 'logo', 'jcpenney']);"
onmouseover="changeImgSrc('JCP_FullImage_321x400.png')"
onmouseout="document.getElementById('partnerHoverImg').src='../images/FPO_FullImage_321x400.png'">
<img src="../images/JCPenney_logo_150x110.png"/></a>
Been looking at this for a minute and any help would be greatly appreciated! Thanks!
You already have it wrapped in a link. Just set the href:
<img src="../images/JCPenney_logo_150x110.png"/>
Please separate your UI from your functionality. It iwll make your code a lot more readable and easier to maintain. That said, you could stick the link in a data attribute inside the img - something like this:
<img class="RedirectImage" data-url="www.google.com" src="blah.jpg"/>
JQuery:
$(".RedirectImage").click(function(e){
document.location.href = $(this).data("url");
});
You should just add an href="link.html" to the a tag as others have suggested.
If you can't do that and you can't add another handler with JavaScript, you just need to add another statement within the onclick attribute
<a class="thumbnail even"
onclick="_gaq.push(['_trackEvent', 'holiday', 'logo', 'jcpenney']);
location.href='link.html'"
onmouseover="changeImgSrc('JCP_FullImage_321x400.png')"
onmouseout="document.getElementById('partnerHoverImg').src =
'../images/FPO_FullImage_321x400.png'"
>
<img src="../images/JCPenney_logo_150x110.png"/>
</a>
I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?
The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();
html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();