When I click the href, I want to display the image and description from the target id. Can someone correct this code for me and show me how to do it right? Thank you very much!
HTML:
<div id="gallery"><img/></div>
Click me
jQuery code:
var datas={
"images":[{ "src":"gallery/panorak.jpg",
"title":"PANORAK",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"panorak",
},
{
"src":"gallery/kamoa.jpg",
"title":"kamoa",
"date":"28/10/2010 Web Design",
"description":"desc",
"id":"kamoa",
},
]};
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
var list=$("<ul/>");
gallery.append(list);
datas.images.each(function(i,j){
list.prepend($("<li/>").$("<img/>").attr("src",datas.images[i].src).load(function(){ }));
});
});
Any help is greatly appreciated! Thank you very much!
I have made some changes to your code:
http://jsfiddle.net/T5r6D/
Have a look at my jsfiddle link for all updates.
You had some structure in flow issues and javascript error.
I am adding all image in array using normal for loop. once loop is done, i wrap images with <li> and adding the list to the stage.
Keep in mind that images will not be shown coz it is not on the jsfiddle server. Try it on your side.
UPDATE
http://jsfiddle.net/T5r6D/1/
So the new update does not hide the full container.
The anchor #tag [href] will be matched with the images title tag. So once clicked on a button it will hide the image that matches.
Try this:
$(document).ready(function(){
var gallery=$("#gallery")
//****I don't know how to display it right at this point
$('a').click(function(){
var list=$("<ul/>");
gallery.append(list);
$.each(datas.images, function(i,j){
var img = $("<img/>").attr("src",datas.images[i].src);
list.prepend($("<li/>").append(img));
});
});
});
If you want to trigger events when something is clicked, you can use click() function. And I fixed each() function part. Check this documentation. And I split some code to improve readability.
Related
I've got a problem where all the dynamic links on my homepage have "#comments" at the end, making it so when the user clicks their screen is annoyingly jolted down to the 'Comments' section each time rather than staying on top.
Example URL:
https://example.com/441447279/amazing-art/#comments
Is there a way to dynamically strip them of the 'comments' part via jQUery?
They're always the SECOND link in a unique class <p class="g1-meta entry-meta entry-byline entry-byline-s entry-byline-with-avatar">
so I was thinking something like
var linkURL = $(".g1-meta.entry-meta.entry-byline.entry-byline-s.entry-byline-with-avatar").find("a").prop('href');
but I don't know how to make it retrieve the SECOND link instead of the 1st.
And I don't know where to go from there... Help appreciated.
Use this
//The key here is to use nth-of-type selector
$(".g1-meta.entry-meta.entry-byline.entry-byline-s.entry-byline-with-avatar").find("a:nth-of-type(2)").each(function(){
let link = $(this).prop('href').replace('#comments','');
$(this).prop('href',link)
})
Or without jQuery
Array.from(document.querySelectorAll('.g1-meta.entry-meta.entry-byline.entry-byline-with-avatar')).forEach(function(node){
let anchorNode = node.querySelectorAll('a')[1];
anchorNode.href= anchorNode.href.replace('#comments','');
})
I'm writing a plug-in somewhat same like auto-complete or virtual keyboard with selected input values along with sorting and searching. This plugin is working fine to if I use it once in a page but when I apply this one to more then one then it is showing both the boxes and events are applied on the last written object. Sample code and fiddle is below:
http://jsfiddle.net/mantrig/ugmwa5b5/
my plug in code to in :
$(document).ready(function(){
var testData = ["BSL","DSK","NPNR","SAV","ET","NDLS","JPR","MAS","BCT","NZM","BR","SUJH"];
$(".stations").myAutoSuggest({
data:testData,
dataref:"stationsList",
title:"Station List",
sort:"desc"
});
var trainData = ["12345","32151","64231","56421","78542","13452"];
$(".trains").myAutoSuggest({
data:trainData,
title:"Train List",
dataref:"trainsList",
sort:"desc"
});
});
I'm very much new to writing any plug-in so code may be very dirty. A little help will be much appreciated!!
You missed '.
Change $(body).append(html); to $('body').append(html);
Jsfiddle
Problem is your "selectedTextbox" variable change here will solve your problem
$(".Help").bind("focus",function(e){
selectedTextbox=this;
showVirtualHelp(selectedTextbox);
});
and later using it here because there are multiple text boxes so you need to pass reference current focused element to show help box
function showVirtualHelp(selectedTextbox) {
$(".virtualHelp."+settings.dataref).css("top",($(selectedTextbox).offset().top+30)+"px");
$(".virtualHelp."+settings.dataref).css("left",($(selectedTextbox).offset().left+30)+"px");
$(".virtualHelp."+settings.dataref).show();
}
Working Fiddle
I need your help at a problem of my Wordpress Webpage. My Wordpress-page is an Single-Page-App with 3 different boxes of content. The left and center boxes are static, the right one changes its content by clicking on links of the other boxes. I decided, to load all the content in the right box and show them with the CSS-command visibility. With a combination of pathJS and JS, i want the URL to change by clicking on the links. So far so good - all works fine, but i dont get managed via my JS-Function to remove the shown-class.
My script looks like this:
<script>
function showDetailContent(showid) {
//suche objekt right_id -> was du zeigen willst -> getelementbyid
alert("1");
var id = document.getElementsByClassName('shown');
alert("2");
id.classList.remove('shown');
alert("3");
document.getElementByID("right_" + showid).classList.add('shown');
alert("4");
}
//var c = document.getElementById('content'); -->do the function :)
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script>
The alerts are just my way of "debugging". I think its not the best way to debugg, but i am very new in the world of prorgamming and this is kind of easy.
However, the first two alerts are shown, if i activate a link. So the (first) mistake is on the line
id.classList.remove('shown');
Normally, the right-box is hidden, so that only one content is load.
Do you understand my problem till here?
I would appreciate fast help!
Greetings, Yannic! :)
Look at this : http://snipplr.com/view/3561/ to know remove class pure javascript
getElementsByClassName gets multiple elements, try:
var id = document.getElementsByClassName('shown')[0];
Or iterate through them if you want to remove class from all elements with class shown;
I've just gotten the interest to learn about web programming. Encountered a problem and hope someone could show me some directions.
Example: http://jsfiddle.net/KdhPG/99/
Current: when hover over the image ID, it changes the text ID color to 'red'
Likewise isn't possible to hover over the text ID to change the current img src of the image ID to another image src/URL?
Thanks!
Not good at jQuery.. but here is a possible solution using the hover so that the previous image is restored. The image will change as you say when hovering over the text, once the mouse leaves it will restore the previous image:
var prevsrc;
$("#one").hover(
function() {
prevsrc = $("#img-one").attr('src');
$("#img-one").attr('src', 'yourNewImageUrl');
},
function() {
$("#img-one").attr('src', prevsrc);
}
);
Like this?
http://jsfiddle.net/yDhhr/
That doesn't account for mouseout / unhovering, but you should be able to take this code and do it.
As a side note, using the attr() feature of jQuery you can change basically any attribute you want to. It's pretty useful.
$("#img-one").hover(function() {
$('#img-one').attr("src","http://aviationhumor.net/wp-content/uploads/2011/02/chuck-norris.jpg");
}
EDIT:
As David Thomas mentioned in this case it's better to work with DOM elements like this
this.src = 'http://aviationhumor.net/wp-content/uploads/2011/02/chuck-norris.jpg';
I am creating two divs:
var div_day=document.createElement("div");
var div_dateValue=document.createElement("div");
I then want to add div_day to an existing calendar div and div_dateValue to div_day:
$('#calendar').append(div_day)
$(div_day).append(div_dateValue);
div_day gets added to calendar, but div_dateValue does not get added to div_day, and the script stops there. No errors in the console but it is in a loop and should have more div_days (each with a unique id). I am new to jquery so any help is appreciated.
In my search I have found how to add divs, but not to add a dynamically created div to another dynamically created div.
Thanks for your help!
Kevin
div_day.appendChild(div_dateValue)
$('#calendar').append(div_day)
Something else must be going on (even with your missing semi-colon). Your example works fine here:
http://jsfiddle.net/P4rh5/
But, instead of creating divs with straight javascript, you can do it with jQuery:
var div_day = $("<div>");
var div_dateValue = $("<div>");
$('#calendar').append(div_day);
$(div_day).append(div_dateValue);
Of course, you could do this in a single step:
$('#calendar').append("<div><div></div></div>");
$('<div><div></div></div>').appendTo("#calendar");
Try this and mark it as answer if it helps