Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin
So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>
I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected
I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
Related
I am having a html page where i have to add data-fancybox="gallery" to all the links in a page to display a image in a fancybox.
right now i am adding manually to all the links in each page.
how can i add automatically data-fancybox="gallery" to all the links through javascript/Jquery?
Example:
<a data-fancybox="gallery" href="https://example.com/Capture.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="603" height="640" src="https://example.com/Capture.JPG" width="620" /></a>
Just use JQuery to loop through each <a> element and add a data attribute like this:
$("a").each(function ()
{
$(this).attr('data-fancybox', 'gallery');
});
EDIT
If you want to add it only to certain <a> elements (like inside a container) look at this example:
(this adds the fancybox data-attribute only to the elements which are inside the .do-add-fancybox container)
$(".do-add-fancybox a").each(function() {
$(this).attr('data-fancybox', 'gallery');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="do-not-add-fancybox">
<p>
Hello World
</p>
test
</div>
<div class="do-add-fancybox">
<p>
Hello World, 2
</p>
test
test
test
test
test
test
</div>
</body>
It might be helpful.
/*data-fancybox="gallery"*/
var all_anchors = document.getElementsByTagName('a');
for (i=0; i < all_anchors.length; i++){
all_anchors[i].setAttribute("data-fancybox", "gallery")
}
console.log(document.getElementsByTagName('a'));
HTML syntax:
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
JavaScript access:
var article = document.getElementById('electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
CSS access:
article::before {
content: attr(data-parent);
}
reference link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
try:
document.body.getElementsByTagName("a").setAttribute("data-fancybox", "gallery");
$("a").attr('data-fancybox','gallery') // this should add gallery to all a link under named data-fancybox
$("a[href]").attr('data-fancybox','gallery') // this should add gallery to a tag with only href inside a link under named data-fancybox
To me Case like this absolute value use above selector instead of
each. You know value to add your a link unless value to add different
for each time use each otherwise above code doing fine
Taking a web design course, and need to use strictly Javascript on this project.
Basically I want to have a series of thumbnails on the left of the screen, and when one is hovered over it brings up information about the image on the right side of the screen. It remains that way until another thumbnail is hovered over, then the information is replaced.
I thought of having a series of divs on-top of eachother containing the information, and onhover the targeted div appears and the last div disappears.
Any suggestions?
Give the images a mouseover attribute and run a function on hover.
<img onmouseover="changeInfo(0)">
<img onmouseover="changeInfo(1)">
<img onmouseover="changeInfo(2)">
<div id="showInfo"></div>
Then place the info for every image in an array and change the inner html in the div depending on which image is being hovered.
function changeInfo(index){
var texts = ['Info on img0','Info on img1','Info on img2'];
var info = document.getElementById('showInfo');
info.innerHTML = texts[index];
}
I don't know if this is the result you want to get. First, I declare all the images using divs. The information is hidden at the beginning.
<div id="posts">
<div id="post1">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post2">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
<div id="post3">
<img src="[Insert an image]" width="100" height="100"/>
<p class="hide"> information about picture one </p>
</div>
</div>
these are the css classes
.nolabel p {display: none;}
.label p { display: block; }
.hide { display: none; }
and javascript:
var posts = document.getElementById("posts").children;
function forEach(el, callback) {
for(var i = 0; i <= el.length; i++) {
callback(posts[i]);
}
}
forEach(posts, function(child) {
child.addEventListener("mouseover", function(){
forEach(posts, function(el) {
if(child.id === el.id)
el.className = "label";
else
el.className = "nolabel";
});
});
});
the forEach helps us to simplify a this code a little.
Since we could have any number of images I thought it was not a good
idea to reference each of them by its id.
When the cursor hovers over one of the images we trigger a mouseover event which will compare the ids. The if statement makes sure we only modify the element we clicked and the others remain with the nolabel class (or replace it if they had label).
I hope that helps.
jQuery would be best for this, or you can use an onMouseOver function and your information styled with visibility: hidden. Maybe post some code so more help can be provided.
Check this out too Display text on MouseOver for image in html
On http://www.socialstudent.co.uk/stackoverflow/ I am trying to work out a way to make it so when you tap an image on mobile, it makes text appear below it and a button. Then if you tap it again it disappears.
I have tried the usual ways in JS but none seem to work. Any ideas on how I can get that to happen would be great!
An example would be this - http://jsfiddle.net/ZECTP/ but with the image being tapped on mobile.
JS off jsfiddle as was required:
$(function () {
var div = $('#showOrHideDiv');
$('#action').click(function () {
div.fadeToggle(1000);
});
});
HTML off jsfiddle as was required:
<a id="action" href="#">hide/show text</a>
<div id="showOrHideDiv" style="display: none;">hidden text</div>
It needs to be in addition to the text which is on the image, as below text and a button needs to appear.
Thanks!
I checked the source code of the site you provided and you would need to add this code to get the desired effect. I'm assuming you want to show/hide the text over each image.
var elems = $('#my_horizontal_main_stage li');
elems.find('div').hide(); // text hidden by default, or you can use css
elems.on('click', function(e){
el = $(this);
el.find('div').fadeToggle('fast');
})
Check this udpated fiddle
I think this is what you are looking for.
HTML
<figure class = "figure">
<img src = "http://icons.iconarchive.com/icons/dapino/summer-holiday/96/photo-icon.png" />
<figcaption class = "figcaption">
SOME TEXT HERE
</figcaption>
</figure>
CSS
figure {
font-size: 100%;
}
figcaption {
display: none;
}
jQuery
$(document).ready(function(){
$(".figure").click(function(){
$(".figcaption").toggle();
});
});
i have this code it works fine problem is i need to use it for 60 links
that wil make around 3600 lines of java script code just to be able to see hidden content for 60 divs
sorry it was late, so posted wrong code, it was not working,
forgot to mention my script is menu with two links about and help when page loads the link is shown but not the contens, instead it shows welcome message, when about is clicked it shows its content and when help is clicked it replace the contens with it
ok fixed my example works fine now.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#welcome-content").show();
$("#help-content").hide();
$("#about-content").hide();
$("#about-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").hide();
$("#about-content").show();
});
$("#help-anchor").click(function(){
$("#welcome-content").hide();
$("#help-content").show();
$("#about-content").hide();
});
});
</script>
<div id="anchor-div">
<a id="about-anchor" href="javascript:;">
About
</a>
</br>
<a id="help-anchor" href="javascript:;">
Help
</a>
</br>
</div>
<div id="content-div">
<div id="welcome-content">welcome to help system</div>
<div id="about-content">About=123</div>
<div id="help-content">Help=456</div>
</div>
jsfiddle demo here
Make use of the index of every li to show/hide the corresponding div:
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element
});
$('#anchor-div a').click(function(e) {
e.preventDefault(); // Dont follow the Link
$('#content-div>div').hide(); // Hide all divs with content
var index = $(this).index('a'); // Get the position of the a relative to other a
$('#content-div>div').eq(index + 1).show(); // Show the div on the same position as the li-element (skip welcome div)
});
#content-div>div {
display: none;
/* Hide all divs */
}
#content-div>div:first-child {
display: block;
/* Show welcome */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anchor-div">
About<br />
Help
</div>
<div id="content-div">
<div>Welcome!</div>
<div>About</div>
<div>Help</div>
</div>
This way you neither need ids nor classes
// Edit: I changed the answer to match the new question. I hide the divs using css (not as mentioned in the commets with js)
I would like to target a linked image instead of linked text, which is the way it's coded in the following code snippet using the textContent property on this page: www.ninjasdontsweat.com. The way I understand it is the search is activated when the page loads and adds a className 'sqs-search-ui-button sqs-search-ui-button-wrapper' to the element surrounding the search text (in this case the <li> element).
<script>
//SEARCH
document.addEventListener('DOMContentLoaded', function(){
var nav = document.querySelectorAll(".main-nav .external-link");
Array.prototype.forEach.call(nav,function(el,i){
if (el.textContent.match(/Search/)) {
el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
}
});
});
</script>
<li class="external-link sqs-search-ui-button sqs-search-ui-button-wrapper">
Search
</li>
On my page (see below), basically what I think needs to happen is this: when search.jpg is clicked, the javascript will do two things...add the className "sqs-search-ui-button sqs-search-ui-button-wrapper" to the <a> element and deactivate the href "/nandf/" allowing the css to overlay the page as it does in the first code snippet. Hope that makes sense! Let me know if you have any questions.
<div class="wrapper">
<a class="project " href="/nandf/" data-ajaxify="false">
<div>
<div class="project-image"><div class="intrinsic">
<div class="content-fill" style="overflow: hidden;">
<img data-src="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg"
data-image="http://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg"
data-image-dimensions="396x396" data-image-focal-point="0.5,0.5"
data-load="false" alt="search"
class="" src="https://static.squarespace.com/static/52cd716be4b065c5e52b9967/t/53248d81e4b0d7985481f99d/1394904442216/search.jpg?format=300w"
data-image-resolution="300w" style="top: 0px; left: 0px; width: 282px; height: 282px; position: relative;"></div></div><div class="project-item-count">1</div></div>
<div class="project-title">search</div>
</div>
</a>
</div>
You need to search for images inside the element as well:
var nav = document.querySelectorAll(".main-nav .external-link");
Array.prototype.forEach.call(nav,function(el,i){
if(matches(el)) {
el.className += ' sqs-search-ui-button sqs-search-ui-button-wrapper';
}
});
function matches(el) {
if (el.textContent.match(/Search/)) {
return true;
}
var images = el.getElementsByTagName("img");
return Array.prototype.some.call(images, function(img) {
return img.src.match(/search/);
});
}
If you have more criteria (e.g. matching the image's title), you just need to add them to the matches function.