I'm using Jcink Forums - I can style divs based on the user group which can be used as a html variable (for IDs).
How can I change the link based on the ID?
I'm assuming this cannot be done via just css and html however I'm not well-versed in JS
For Example (not the full code, just a really abridged version):
Stylesheet:
#admin .avatar {background-image:url("admin.jpg");}
#mod .avatar {background-image:url("mod.jpg");}
HTML:
<div id="<!-- |g_id| -->">
<a href="link changes based on div id">
<div class="avatar"></div>
</a>
</div>
If you can script, you can do something like (inline for demonstration, you can loop over all divs and change their links)
<div id="<!-- |g_id| -->">
<a href="whatever" onclick="this.href=this.closest('div[id]').id=='xxx'?'zzz':'yyy'">
<div class="avatar"></div>
</a>
</div>
where an ID of xxx will set the href to zzz otherwise set it to yyy
You can use setAttribute to set the link href according to the id
var ele=document.querySelectorAll("div");
Object.values(ele).forEach((e)=>{
if (e.getAttribute("id") == "abcd") {
var link = e.querySelector("a");
link.removeAttribute("href");
link.setAttribute("href", "www.link2.com");
}
})
<div id="abcd">
<a href="link1">
<div class="avatar">aa</div>
</a>
Related
I have 3 classes with such a structure (this is slider in my web app):
<div class="emotion--digital-publishing">
<div class="dig-pub">
<div class="bg--image">/div>
<div class="dig-pub--layer center center">
<div class="layer--wrapper">
<div class="layer--content">
<div class="dig-pub--button">
</div>
</div>
</div>
</div>
</div>
</div>
I want to get href attribute of a and set a href atribute with this url to dig-pub. It is very important to me that this is the link (which class I clicked), because 3 classes have different links.
I would like to use jQuery.
You bind a click event to your anchor tag. you'll need to assign a class to the anchor tag too if you have many on the page so replace 'className' with your class name. I'm not sure how you want to assign it to the div so I've done it as a data-attribute as this is the conventional way to go.
$('a.className').on('click', function (){
$(this).closest('.dig-pub').attr('data-href', $(this).attr('href'));
});
(Don't forget to close the div on line 3 in your snippet)
jQuery('.dig-pub').on('click', function() {
url = jQuery(this).parent().find('a').attr('href');
jQuery(location).attr(url);
});
https://codepen.io/Kidkie/pen/gdaJjZ
First, add an id to the link and the div (easier to fetch the elements)
<div id="dig-pub" class="dig-pub">
<a id="id" href="/wilson-camo"></a>
Then, get the href
var href = $('#id').attr('href');
Set the value to the div
$('#dig-pub').html(href);
However, you could have find this easily on JQuery documentation.
I'm trying to make this work with the following scenario:
My goal is to get the first image's src from the html structure bellow and then set its src value as the background-image: of another element which exists in the DOM.
The HTML output, dynamically loaded.
I've set up the Instafeed jQuery plugin in a way it outputs the following html structure: Images are dynamically loaded through Instagram API.
I want to grab the image src from the first image bellow...
<div id="instafeed">
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10375586_312675495555582_308260980_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/10454019_1429094704028916_1903084125_n.jpg">
</a>
</div>
<div class="col-xs-4">
<a href="#" target="_blank" class="thumbnail fa-eye fa">
<img class="dynamic-image" src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/e15/1530818_682625665122870_298851871_n.jpg">
</a>
</div>
</div>
...And place it as the url of the following target element .bgcover:
<div class="masthead bgcover" style="background-image: url('https://distilleryimage11-a.akamaihd.net/fdc05880f98511e2af2c22000a9e510c_7.jpg');"></div>
jQuery
The code bellow works, however, it gets the img src of one of the images in the html out and not the first one...
$( window ).load(function() {
// For each image with the class .dynamic-image on the page
$(".dynamic-image").each(function() {
// Grab the image
var image_source = $(this).attr('src');
// Set the background
$(".bgcover").css("background-image",'url('+image_source+')');
});
});
By reading the jQuery's :eq() Selector documentation, I'm now trying to learn how to use the selectors, but I'm pretty new to JS/jQuery, so I'd really appreciate any hints about making it work the right way.
The .each() function in jquery is like a loop. It will run loop through for every match. So, in your above code, ideally it is going to pick the last img tag and set its image as the background.
Instead if you used .first() function it would return the first element that it matches. This is the implementation that would work for you.
$(window).load(function () {
// For each image with the class .dynamic-image on the page
// Grab the image
var image_source = $(".dynamic-image").first().attr('src');
image_source = "url('" + image_source + "')";
// Set the background
$(".bgcover").css("background-image", image_source);
});
Hope this helps.
I'm trying to do something similar to How to hide an element, based on its text, with JavaScript? and Hiding a parent element using JS/JQuery based on the alt tag of a child element
but it's a bit more complicated than that. Here's the entire element (a list item containing lots of stuff) I want to hide:
<li>
<div class="wrapper">
<div class="fulllink" data-href="hideme/some/url" data-title="hideme - some more text">
<a href="/some/url" rel="stuff">
</div>
<div id="fullimage" class="theimage">
<img src="/some/url" title="hideme - some more text" alt="thisis/hideme text">
</div>
<div class="captionwrapper">
<div class="caption">
<p>
<a class="" title="" href="hideme/some/url">more text</a>
</p>
</div>
</div>
</div>
</li>
I want to hide this li element based on the specific content "hideme", which appears several times, but as you can see never on its own. It should be hidden as the page loads, so no user action required.
I've tried to come up with a solution based on similar questions on stackoverflow, but so far unsuccessfully.
You can use the html() function to get the html contents of each li and then search if it contains the desired text: "hideme".
$("li").each(function () {
if ($(this).html().indexOf('hideme') > -1) {
$(this).hide();
}
});
Demo
In my case i want to change the href image icons when the user comes to contact us page. But those images are loaded from header file and i want to change the image path when it comes to contact us page.
<div class="header_nav_buttons" style="width: 25%;">
<div id="first_img" style="float: left;margin-right: 3px;">
<a href="cth/support.php"><img src="cth/theme/boxxie/pix/tech_support.png"/><a>
</div>
<div id="second_img">
<a href="cth/contact.php">
<img id="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
</div>
</div>
And i tried this Jquery codes.
$('#contact_blue_icon').each(function(){
//Change the src of each img
$(this).attr('src','cth/theme/boxxie/pix/blue_contact.png');
});
Any helps would be appreciated.
'contact_blue_icon' is an Id. It is an unique element
Try with full image path
$('#contact_blue_icon').attr('src','http://image_path');
Since id is unique, you need to use class instead for your images:
<img class="contact_blue_icon" src="cth/theme/boxxie/pix/contact_us.png"/></a>
So you need class="contact_blue_icon" not id="contact_blue_icon"
I'm having an issue with using Jquery toggle on a feed. I have a hyperlink called Tags. When i click on this it toggles a div underneath it.
It works - But only for the top post in the feed - If I have any other posts in the feed it doesn't work.
Below Is Jquery:-
<script type="text/javascript">
$(function () {
$("#hypfeedTagBtn").click(function() {
$("#divPostBodyTags").toggle();
return false;
});
});
</script>
Below is HTML:-
<div id="divPostFoot_64" class="dPostMain dPostFoot">
<span id="Content_ucFeeds_repFeedThread_lblFeedViewCouont_0" class="spFootReplyCount"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedShareLink_0" class="spFootLinks"></span>
<span id="Content_ucFeeds_repFeedThread_lblFeedDeleteLink_0" class="spFootLinks"></span>
<a id="hypfeedTagBtn" class="spFootLinksShowTags">Tags</a>
<a id="Content_ucFeeds_repFeedThread_hypFeedMessageMe_0" class="spFootLinks" href="/Mail/NewMessage.aspx?FeedID=64">Message Me</a>
</div>
<div id="divPostBodyTags" class="dPostMain dPostTAGSDIV" style="display: block;">
<ul id="PostBodyTags">
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
<li class="TAGLiItem">
<a class="TAGaItem">Plumbers</a>
</li>
</ul>
</div>
Thanks
Steve
MDN element.id
The ID must be unique in a document, and is often used to retrieve the
element using document.getElementById.
In some documents (in particular, HTML, XUL, and SVG), the id of an
element can be specified as an attribute on the element like so: .
However you can't use this attribute in a custom XML document without
correctly specifying the type of the id attribute in the DOCTYPE.
Other common usages of id include using the element's ID as a selector
when styling the document with CSS.
Note that IDs are case-sensitive, but you should not create IDs that
differ only in the capitalization (see Case Sensitivity in class and
id Names).
Use a class instead of an id if you want to toggle more than one section.