Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to add this to a div in my document but the selection items are all stacking on top of each other even though I'm setting them up in different columns. I think its because I am looping through it and its creating an exact copy of itself and they're stacking on each other. CSS wont fix it either. I've tried wrapping the col-md-3 class outside of the div thats outputting the javascript no luck. I'm really stuck. When I've used React its been easy to do stuff like this with JSX, but I'm having trouble here. Also I should mention that the classes aren't linked to any css. I just named them but they don't do anything. All the styles are inline and can be seen in the jquery.
for (var i = 0; i < works.length; i++) {
$('#work-items').append("\
<div class='col-md-3'>\
<div class='portfolio-item'>\
<span class='work-name'" + works[i].name + " ></span>\
<a href='" + works[i].link + "' class='work-img weblink' style='text-decoration: none; font-size: 1.2em; color:salmon'>\
<img class='img-responsive img-thumbnail' style='height: 150px; width: 300px' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'></p>" + works[i].title + " </span > \
</a >\
<a href='" + works[i].github + "' class='work-img github' style = 'text-decoration: none; color: DodgerBlue; font-size: 1.2em' > \
</a >\
</div >\
</div >\
");
}
I doubt this is needed but heres the array of objects I'm getting the data from.
var works = [
{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
},
]
Link to HTML/CSS Output
Here is the rendered HTML
<html lang="en">
<body>
<div class="container">
<h1 class="name">jJonathan</h1>
<h4 class="title">...</h4>
</div>
<div class="container">
<div id="work-items" class="row">
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/BikesberlinCollage.jpg"> <span class="info"><p class="proj-title"></p>Ecommerce Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" vue=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/projekt.png"> <span class="info"><p class="proj-title"></p>Project Manager</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/recipeapp.png"> <span class="info"><p class="proj-title"></p>Recipe Sharing App</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/jobs.png"> <span class="info"><p class="proj-title"></p>Job Board Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/weather.png"> <span class="info"><p class="proj-title"></p>Weather Checker</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" react="" |="" firebase="" redux=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/planner.png"> <span class="info"><p class="proj-title"></p>Planner</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/form.png"> <span class="info"><p class="proj-title"></p>Javascript Form</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/reactchat.png"> <span class="info"><p class="proj-title"></p>React Chat App</span> Github </div>
</div>
</div>
</div>
<script src="js/work.js"></script>
<script src="js/script.js"></script>
Assuming you are using bootstrap I have to ask if the #work-items has a class of "row".
Besides that, one wonders if the css for any of the non-bootstrap elements you are adding, here, is getting in the way.
If you replace all of the html inside col-md-3 with simple works[i].link does the wrong behavior still occur?
Can you check on padding and margin provided to the CSS classes portfolio-item and work-items also can you try once with col-lg-3 class, I doubt your screen resolution may be leading to the view optimized for mobile where divs are stacked oon top of each other, although in the snapshot the screen size doesn't appear to be an issue.
Spent hours trying to figure this out. Thanks alot for the help. I had an extra character in my bootstrap CDN link. Sorry for wasting everyone's time -_-.
Besides the code you provided works as expected in a minimal environment (which means you should inspect your .col- elements and see which rule messes the position property), here's how you can create and apply a template over an array of items:
How to append data to DOM using a loop or .map()
var works = [{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
}
];
const template_item = ({name,title,pic,link,github}) => `
<div class="col-md-3">
<div class="portfolio-item">
<h4 class="work-name">${name}</h4>
<a href="${link}" class="work-img weblink">
<img class="work-thumb img-responsive img-thumbnail" src="${pic}" alt="${title}">
</a>
<p>
${title}
GitHub: ${github.substring(github.lastIndexOf("/")+1)}
</p>
</div>
</div>`;
const items = works.map(template_item);
$('#work-items').append(items);
.work-img {
text-decoration: none;
}
.work-thumb.img-thumbnail {
height: 150px;
width: 300px;
}
.work-link,
.work-github {
font-size: 1.2em;
color: salmon;
}
.work-github {
color: dodgerblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div id="work-items" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PS:
Loop only to create/concatenate strings or prepopulate an array with your items Elements
Append only once! (not multiple times inside a loop)
Don't wrap <p> inside <span>
Do use alt tags
Related
I'm trying to swap out the title attribute on all images on the page that contain the string slide in the class name. The image class names vary and are followed by a unique numeric string (ex: slide-1234, slider-4321) so it's important it just contains the string slide. I want to replace it with the WordPress post title. Here is my code so far (doesn't work)
<script>
var title = '{{get_the_title()}}';
$('img[class*=slide]').attr('title', title);
</script>
Very simple, but unfortunately doesn't work. I used alert to debug and was able to print the title, but the selector is the issue.
Here's the HTML
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
I believe your script is running before the DOM is fully loaded. You can either place the script code at the bottom of the body tag OR try wrapping your code with $(document).ready(function(){...}).
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var title = 'someTitle';
$('img[class*=slide-]').attr('title', title);
});
</script>
<h6 class="text-primary mb-5 mt-5">Session Photos</h6>
<div id="metaslider-id-1572" style="width: 100%;" class="ml-slider-3-15-3 metaslider metaslider-flex metaslider-1572 ml-slider">
<div id="metaslider_container_1572">
<div id="metaslider_1572">
<ul aria-live="polite" class="slides">
<li style="display: block; width: 100%;" class="slide-1573 ms-image"><img src="https://knowledge.page.org/wp-content/uploads/2019/07/DSC04292-850x500.jpg" height="500" width="850" alt="" class="slider-1572 slide-1573" title="DSC04292" /></li>
</ul>
</div>
</div>
</div>
Im trying create copy link, when user click on link it should auto copied.
i want like this " UPI ID: david#okidfcbank" The same link highlight like blue color.
Here is the code i tried now:
const span = document.querySelector("span");
span.onclick = function() {
document.execCommand("copy");
}
span.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", span.textContent);
console.log(event.clipboardData.getData("text"))
}
});
<div class="form-group">
<label for="phone">Please Kindly Pay for Registration</label><br>
<div class=" col-md-6 ">
<img class="img-responsive cc-img" src="../img/payment/googlepayImg.png" style="padding-bottom: 10px; padding-top: 10px">
UPI ID: david#okidfcbank
<label for="phone" style="font-weight:700; font-size: 17px;">or</label>
<img class="img-responsive cc-img" src="../img/payment/googlepay.png">
</div>
<div class=" col-md-6">
<img class="img-responsive cc-img" src="../img/payment/paytmImg.png" style="padding-bottom: 10px; padding-top: 10px">
<span> Paytm link https://p-y.tm/aVL-Maw </span><br>
<label for="phone" style="font-weight:700; font-size: 17px;">or</label>
<img class="img-responsive cc-img" src="../img/payment/paytm.png"><br>
</div>
</div>
You need to specify the link that you want to copy by adding ID.
You need to add a javascript - jQuery " Copy Function ".
Please follow this link :
codepen.io/shaikmaqsood/pen/XmydxJ
Its an amazing code.
This question already has answers here:
How to get nth jQuery element
(11 answers)
Closed 4 years ago.
I have 3 images all within the same class name "image"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
I would like to replace only the 2nd image with a different image link. So I tried something like this:
$('.image').find('img').attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
However, this replaces all the images and not just the 2nd one so I tried to do $('.image')[1].find(..)..., but that didn't work I was getting the error: Uncaught TypeError: $(...)[1].find is not a function.
I would greatly appreciate it if someone can please explain what I'm doing wrong and how I can fix this?
Thanks.
You are quite close - find() will return an array and you want your changes to be applied at a single element:
$($('.image').find('img')[1]).attr('src', 'http://cdn.shopify.com/s/files/1/1061/1924/products/Smiling_Face_Emoji_with_Blushed_Cheeks_grande.png?v=1480481056');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imageHolder" style="width: 80%; display: inline;">
<div class="image">
<img src="//i.stack.imgur.com/nO2hl.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/IkjJW.png">
</div>
<div class="image">
<img src="//i.stack.imgur.com/QrKSV.png">
</div>
</div>
https://api.jquery.com/find/
I have this code that is a couple of links with divs inside them. When i click on one of the links it pops another div up that fills out using the "Case No" and "Type". However it only uses the data from the first link, not any other that i click.
HTML
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
and the javascript is
$('.plu-view-data a').click(() => {
$("#pedlookup-overlay").css('display','block')
var type = $(this).find('#type').text()
var caseno = $(this).find('#case_no').text()
$('#plu-overlay-headbar').find('p').html(type+" || "+caseno)
})
Any idea as to why when i click the link it only uses the first link information?
The one tradeoff with using arrow functions is that there is no binding of this. To get it's context back you unfortunately have to go back to using the traditional function syntax (as it currently stands).
$('.plu-view-data a').click(function() {
...
});
You have duplicated id 'type' in your html. please change it.
$('.plu-view-data a').click(function() {
$("#pedlookup-overlay").css('display', 'block')
var type = $(this).find('#type').text();
var caseno = $(this).find('#case_no').text();
if (type && caseno) {
console.log(caseno);
$('#plu-overlay-headbar').find('p').html(type + " || " + caseno)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plu-view-data">
<a href="#" id="tp_0">
<div class="tp-box">
<div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1234</div>
</div>
</a>
<a href="#" id="tp_1">
<div id="tp_id" class="tp-box">
<div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
<div id="case_no">CASE NO: 1235</div>
</div>
</a>
</div>
I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.
Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).