Cloning an array? - javascript

I have a profiles page with a grid of photos that each have a pop-up link to a full bio description. Below each of the photos, wrapped in an h3 are the names of each individual on the profiles page. I'm trying to take the pop-up link from the image and add it to the name that's below the photo so that I can trigger the pop-up from the title as well as the profile photo.
The way the pop-up works is to have the anchor tag on top of the photo, so it's not wrapping the image. Instead it's made the same size as the image, and laid on top of it with CSS. So what I'm trying to do is just pull the anchor tag from the images and assign it to a <span> that wraps the name below the image.
To do this, I've added all the profile image link data to an array and managed to loop through the pop-up links and prepend them to the profile name. Here's the problem, now the image links no longer work.
In researching a fix for this I came across the clone() function which I thought would work, but apparently it doesn't work on arrays.
So I'm a bit lost on this one. Any thoughts on how I might resolve this? Any help would be greatly appreciated.
This is what I have so far:
(function($){
var profileImgLink = $('.grve-item-url.grve-image-popup'),
titleLink = $('h3.titleheader'),
titleWrapper = titleLink.children('span'),
attributes = profileImgLink.prop('attributes'),
arr = profileImgLink.toArray();
$.each(arr, function(index){
titleWrapper.each(function(index){
$(this).prepend(arr[index])
});
});
})(jQuery);
EDIT: Heretic Monkey provided a solution that fixed the problem. He pointed out that I could add the clone() method to the array variable I had set up, and that fixed the problem. so this question has been answered.

Try this:
(function($) {
$('.grve-item-url.grve-image-popup').each(i, element){
var $link = $(element);
var $clonedLink = $link.clone();
$link.closest("h3.titleheader").children('span').prepend($clonedLink);
}})(jQuery);

Related

Where each variable is equal to spans content add class

The Question and Codes
I am struggling with the below code:
$('.rdsubs-mysubscriptions table tbody tr td a').each(function() {
var subItem = $(this).html();
//console.log(subItem);
var subItemStripped = subItem.substring(12);
console.log(subItemStripped);
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
}); // end of each function
When I check the console for subItemStripped then it shows this:
Framework
Content
Slideshow
Which means (in my head at least ;-)) that for each span that is inside the body it should find one of these subItemStripped and where it finds a match it should add the class hello but this is not happening.
Actually, nothing is happening.
When I change this line:
$('body').find('span:contains("subItemStripped")').addClass('HELLO');
to
$('body').find('span:contains("Framework")').addClass('HELLO');
It works nicely. So am I putting the variable subItemStripped wrongly in there or has it something to do with the .each() function.
I tried the below things to make it work
With the above code I tried a couple of variations before I came here:
$('body').find('span:contains(subItemStripped)').addClass('HELLO');
$('body').find("span:contains('subItemStripped')").addClass('HELLO');
I also tried it with completely different sets of code I gathered from other SO posts but none of those worked. Why I don't know.
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).addClass("hello");
$("span").filter(function() {
return $(this).text() === subItemStripped;
}).css("font-size", "6px");
Why do I need this
I know I don't have to explain why I need this but it could be useful in coming up with other great ideas if the above is not feasible.
I have a webpage and on that page is a menu filled with products that a user can download if he/she has access.
Each menu item has a span with the title in it. Those titles are built up like: Framework Content Slideshow
On this same page is also a component that shows all the users subscriptions.
With the above code, I look to all the subscriptions of the user. Which returns
CompanyName Framework CompanyName Content CompanyName Slideshow
Then I Strip .substring(12) all the parts that I know are not present inside the menu. Which leaves me with Framework Content Slideshow
At this point, I know that some menu titles and the stripped item are the same and for every match, I want to add a class upon which I can then add some CSS or whatnot.
Hopefully, the question is clear and thanks to everyone in advance for helping me out.
#gaetanoM You are completely right. Right after I posted the question I came on this site:
jQuery contains() with a variable syntax
And found the answer which is the same as you are saying!
$('body').find("span:contains('" + subItemStripped + "')").addClass('HELLO');
Thanks so much!
#gaetanoM Can you make your comment in an answer? Then I can select it as the accepted answer. I am answering this question now just to make sure it has an answer. As people get punished for asking questions that don't get answers.

Adding an image next to text if the text links to a certain page

So I've been working on a chrome extension that basically just changes up fonts and the color scheme of a certain website. I decided that as a kind of cool easter-eggy type thing it would be cool if the chrome extension's logo showed up next to my name when I posted on the site's forums.
What would be the best way of doing this? I'm able to inject CSS and JS into the site. I was thinking that a script looks for an a tag that links to my profile page, and then adds the icon the right of it or something. I have basically no experience with Javascript so any help is much appreciated.
Thanks,
Erik
var x = document.querySelectorAll("a");
for(var i=0;i<x.length;i++){
if(x[i].href.indexOf('LINK_TO_YOUR_PROFILE')==-1) // skip if link is not a link to your profile
continue
var node = document.createElement("img");
node.src = "http://via.placeholder.com/350x150";
x[i].appendChild(node);
}
try this code
It will search for all anchor tags and add them to array "x" and then it loops over the array and creates a new img node and adds it next to the a tag.
You just have to change the img src of course!
hope my answer is what you are looking for!

How can I tell Reddit to ignore my Logo for the Thumbnail?

When a user shares content from my website, often the image appearing in the thumbnail is the logo of the website instead of the image itself.
How can I tell reddit to ignore the logo ?
I searched a lot and found answers on how to specify which image reddit should use with the og image meta tag, but I can't do that since my website is part UGC, meaning I wouldn't know what is the absolute URL for every image.
For example: reddit not pulling scraping image on link post
EDIT:
This doesn't seem to be working on my end. Does it work on yours ?
<script>
function img_find() {
var imgs = document.getElementsByTagName("img");
var imgSrcs = [];
for (var i = 0; i < imgs.length; i++) {
imgSrcs.push(imgs[i].src);
}
return imgSrcs;
}var result = img_find();
$("meta[property='og:image']").attr("content", result[1]);
</script>
Your code
$("meta[property='og:image']").attr("content", result[1]);
is almost the solution. Let's do the last step:
$("meta[property='og:image']")
.attr("content", $('css_selector_of_the_img')[0].src);
So what is css_selector_of_the_img? Since you have the website logo, I'd assume that you had some HTML around your image. Probably the image has a className or placed into a container e.g. css_selector_of_the_img could be div.content img or img.uploaded whatever. And throw away your img_find function J.
I found the solution.
Adding property="og:image" to the <img> I want selected worked.
the point of #Kosh Very's answer is to set the og:image tag with the first image in your page using jQuery, but this depends on the capability of reddit's scraper, which is whether the scraper can run javascript.
another solution is to use regex to parse for images in the UGC, and use it as your og:image url in your page generator.
hope that helps.

Looking for advice on what approach to take for multiple image swaps

I'm working on designing an interactive university campus map and need some direction with what I am looking to do.
Link to page: http://www.torontoclassfind.com/startpage.html
I want to be able to click on the links in the top menu (only one link is active so far and it loads and Ajax page in lower left div) and have it swap the building image with a different image to show that it's been selected.
I could do that with the following:
$("#buildinglink1").click(function () {
$("#buildingimg1").attr("src","highlightedimage.gif")
})
Problem is I need to change back the image to it's default image once another menu link is clicked and a new building is selected.
The building images are located at www.torontoclassdfind.com/building/ and the highlighted images are located at www.torontoclassdfind.com/buildingc/ and the names for the buildings are the same in both locations.
I am thinking of using JQuery's .replace element to do this (ex: jquery remove part of url) which would remove or add the 'c' to the url, but I'm kind of lost from here.
Any tips? I think I need to make a function that would indicated a link is selected and somehow merge it with the .replace element.
Just a note: .replace is a JavaScript string (and others) method, not a jQuery method.
I think you're asking to do something like this:
$(".any-building").click(function () {
//replace all building sources with the unhighlighted version
$(".any-building").attr('src', function () {
return $(this).attr('src').replace('buildingc', 'building');
});
//replace clicked image with highlighted one
$(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});
A possible downside is that with a lot of images this swap may take a long time or cause some flicker. If that's the case, then you may want to add a class .active to the highlighted image or something like that and only do the swap for that image and the newly clicked one.
A common learning mistake in jQuery is to focus on ID's for all types of selectors. They work great for very small number of elements however become very unwieldy fast for large groups of elements that can easily be managed by simpler code methods.
You want to be able to write far more universal code where one handler would cover all of your links that share the same functionality in the page .
Example:
var $mainImage=$('#mainImage')
var $buildingLinks=$('.buildingliststyle a').click(function(){
/* "this" is the link clicked*/
/* get index of this link in the whole collection of links*/
var index=$buildingLinks.index(this);
/* perhaps all the image urls are stored in an array*/
var imgUrl= imagesArray( index);
/* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
var imgUrl=$(this).data('image');
/* store the current image on display (not clear how page is supposed to work)*/
var currImage=$mainImage.attr('src');
$mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
/* nw update main image*/
$mainImage.attr('src', imgUrl);
/* load ajax content for this link*/
$('#ajaxContainer').load( $(this).attr('href') );
/* avoid browser following link*/
return false;
});
/* button to reset main image from data we already stored*/
$('#imageResetButton').click(function(){
$mainImage.attr('src', $mainImage.data('lastImage') );
})
Can see that by working with groups of elements in one handler can do a lot with very little code and not needing to focus on ID
Code above mentions potentially storing image url in data attribute such as:
Building name

Loading an attribue from element on external page

My page has a list of links that each loads new pages with ajax. These new pages contains a gallery of images and a main image.
My objective is to get the source-url from the main image to show as a thumbnail on the corresponding link on the link page.
I have no idea how to go about this. If someone could point me in the right direction and maybe give me some code to follow I'd be grateful.
You can load an external page with jQuery.get.
$.get('my_external_page.html', function(data) {
// data is the pages contents.
});
Then shove that into a div
$.get('my_external_page.html', function(data) {
// data is the pages contents.
var haystack = $('<div>').html(data);
var needle = haystack.find('.image-we-want');
var imageSrc = needle.attr('src');
});
That's a start. Of course it assumes you can use jquery, and the element you're searching for has a class or ID.
Got it working. Probably not the smartest way to do it, but it works.
I have a page full of links (). I also have an empty div at the bottom of called .
The code loads an icon to these links. The links points to a new pages containing several images. The icons are minified versions of the pages' standard images.
function iconPicHandler(){
var aTags = $('#linkpage a');
for(var i = 0; i < aTags.length; i++){
$('#invisible').load('page3.html #standardImage',function(aLink){
return function(){
$('<img src="'+ $('#standardImage').attr("href") +'" />')
.prependTo(aLink);
}
}
($(atags[i])));
}
$('#invisible').hide();
}
So the first thing I do is get all the links in the linkpage. I put the rest of the code into a for-loop, so I can do the same for all the links.
Then I load " #standardImage" from page3.html into "#invisible". #standardImage" is an empty div containing an url to a minified version of page3's standardImage. The url is held as the div's href attribute.
Then came the tricky part. I'm not sure what I did here. But as a callback function I made a function, that takes one argument, which is specified at the end($(atags[i])). This function then returns a new function! This enabled me to both have access to the atags(links) and the newly loaded $('#standardImage').
Inside the function I extract the href from $('#standardImage') and use it as a src for an image prepended to the link.
At the end, outside the for-loop, I hide $('#invisible').
As previously stated this is not a very smart way of doing this, but it gets the job done. Who knows, maybe it can help the next beginner walking by who just happen to have a similar problem.

Categories