I'd like to make a link to a input. My current link example works (takes me to the area where the id is set) but what I really want is when a user clicks on the link to take him exactly to the input, being able to type right away.
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Is this even achievable without JQuery/JavaScript? Please post solutions in any method you can imagine. Been searching for this for a while and couldn't find an answer.
No need to use javascript: use a label instead of a link with the for attribute
<input type="text" id="search" name="search">
<label for="search">
<img src="http://www.example.com/images/something.jpg" alt="something">
</label>
if you also need a smooth page scroll animation, in order to reach the top offset of the input element, you can instead use a script, e.g.
Codepen Example: http://codepen.io/anon/pen/VLyOqg
$(function() {
$('label[for]').on('click', function(evt) {
evt.preventDefault();
var inputId = "#" + $(this).attr('for');
$('html:not(:animated), body:not(:animated)').animate({
scrollTop: $(inputId).offset().top
}, 600, function() {
$(inputId).focus();
});
});
});
<script>
function setFocus(){
elm = document.getElementById("search");
jump(elm);
elm.focus();
}
function jump(elm){
var top = elm.offsetTop; //Getting Y of target element
window.scrollTo(0, top); //Go there.
}
</script>
...
<a href="javascript:setFocus('search')">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Use jQuery focus!
$('[href="#search"]').click(function(){$('#search').focus();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" name="search">
<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>
Related
I want to append a duplicate of an input box in a parent box. Here is my HTML structure:
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
And here is my jQuery code:
function addPlaceholder(parentClass){
var placeHolder = $(parentClass).children().eq(0);
$(parentClass).append(placeHolder);
console.log(placeHolder);
}
$('.add-reading-btn').click(function(){
addPlaceholder('.reading-group');
});
Here is the jsfiddle link: https://jsfiddle.net/abhishekraj007/kexe6gxn/
What am I doing wrong?
Your code is taking the existing <input> element and moving it from the <div> and back into the <div>, so it looks like nothing is happening. If you .clone() the element and then .append() it, a new element will be added.
Here is a working example:
function addPlaceholder(parentClass) {
var placeHolder = $(parentClass).children().eq(0).clone();
$(parentClass).append(placeHolder);
console.log(placeHolder);
}
$('.add-reading-btn').click(function() {
addPlaceholder('.reading-group');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
If you want to add focus to your <input> element on load, you can do so by adding this line to the bottom of your code:
$('#link').focus();
If you want to add focus to the new element on creation, as well as give it an empty value rather than copying the prior element's value, add this line to the end of your addPlaceholder() function:
$(placeHolder).val("").focus();
you can just add the .clone() method of jquery to create a clone of the textbox like below . You were only referring to the same element not the cloned html before.
$(document).ready(function(){
function addPlaceholder(parentClass){
var placeHolder = $(parentClass).children().eq(0).clone();
$(parentClass).append(placeHolder);
//console.log(placeHolder);
}
$('.add-reading-btn').click(function(){
addPlaceholder('.reading-group');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
<input type="text" placeholder="Enter Reading link" id="link">
</div>
+ Add another link
Here is a working fiddle
https://jsfiddle.net/kexe6gxn/2/
I have DOM like below:
<body>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="text" class="pi" value=""><br>
<input type="text" class="vi" value="">
<button>users</button>
</body>
When user clicks on button it appends new 'td' to 'tr'. It works good.
Problem:
On 'a' click I want to open two links. The best would be when first redirects current page to another and second opens seperated window. I tried to change 'a' on another tags, but did not help.
$('button').click(function () {
var pic = $('input[type="text"].pi').val();
var vid = $('input[type="text"].vi').val();
var cont = '<td><a data-big-image="' + vid + '" href="#"><img src="' + pic + '"></a></td>'
$('table').children('tbody').children('tr').last().append(cont);
});
$('a').click(function(e) {
e.preventDefault();
var bigImage = $(this).data('big-image');
window.open(bigImage);
window.open('xyz');
});
Make a link like it's normally done
Next place an inline element (ex. <b>, <span>, etc) inside the link
Then add an inline attribute event handler to the new element.
<a href="https://google.com" target="_blank">
<b onclick="location.href='1st_location.html">GO</b>
</a>
Demo
(does not work due to SO's security measures, see PLUNKER)
<a href="https://google.com" target="_blank">
<b onclick="location.href='https://example.com';">GO</b></a>
I am hover on image. But i want URL of input tag.
CODE:
<img class="prod-zoom-img" src="image.jpg>
<input style="display:none;" data-bigimgurl="picture.png">
I want to hover on prod-zoom-img class but i want to get of bigimgurl.
JQUERY:
$("img.prod-zoom-img").hover(function () {
------------ ????????---------
});
You can use mouseenter() event like following.
$('img.prod-zoom-img').mouseenter(function() {
var url = $('input').data('bigimgurl');
alert(url);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="prod-zoom-img" src="image.jpg">
<input style="display:none;" data-bigimgurl="picture.png">
I use Superslides to create an intro. I need that at first the background is white (image 0.jpg) and then when the mouse enters a div change to another image random.
My code is:
HTML
<div id="entra_mouse">
<img src="imagenes/intro/logo.png" alt="" />
<br /><br /><br />
Entrar / Enter
</div>
<div id="slides">
<div class="slides-container">
<img src="imagenes/intro/0.jpg" alt="" />
<img src="imagenes/intro/1.jpg" alt="" id="img_aleatoria" />
</div>
</div>
Javascript
<script>
$(function() {
$('#slides').superslides({
hashchange: false
});
$('#entra_mouse').on('mouseenter', function() {
$('#slides').css('display','inline');
var imagen_aleatoria = Math.round(Math.random()*6);
$("#img_aleatoria").attr("src", "imagenes/intro/'+imagen_aleatoria+'.jpg");
$('#slides').superslides('start');
});
$('#entra_mouse').on('mouseleave', function() {
$('#slides').superslides('stop');
$('#slides').css('display','none');
});
});
</script>
The problem is when the mouse enters ($('#entra_mouse').on('mouseenter', function() {) always show image 1.jpg and not the random.
How I can fix it? =(
Thanks.
Hej!
You can write $('#slides').data('superslides').animate(something).
In my case I have a gallery and when you click on a specific image on get the slide show on a overlay that slides from the top. I get the current index of the thumbnail clicked and animated the slideshow to match with the thumbnail:
$( thumbnail ).click(function() {
var current = $(thumbnail).parent().children('a').index(this);
$('#slides').data('superslides').animate(current);
});
Although I have to say that is not ideal, since I would like to go to a specific slide without animating the action. I haven't find a way to do so.
I hope that helps you! Good Luck!
I don't know what I am doing wrong with changing href attribute in link from ?page to &page. It stays on ?page. Thank you for any advice.
Jquery:
var article_pagination_change = function(){
$('pagination a').each(function(){
$(this).href.replace('?page','&page');
});
}
article_pagination_change();
HTML:
<div id="pagination80" class="pagination" style="">
<a class="first" data-action="first" href="?page=1"><<</a>
<a class="previous" data-action="previous" href="?page=1"><</a>
<input class="pag_input_80" type="text" value="1 of 12" data-max-page="12" readonly="readonly">
<a class="next" data-action="next" href="?page=2">></a>
<a class="last" data-action="last" href="?page=12">>></a>
</div>
You need to actually set the attribute:
var article_pagination_change = function(){
$('.pagination a').each(function(){
var newurl = $(this).attr('href').replace('?page','&page');
$(this).attr('href', newurl);
});
}
article_pagination_change();
Note that I added the . before pagination and am using attr('href') instead of just href.
Here's a working jsFiddle.
If you don't mind changing your code a bit more, you can try this simpler approach:
var article_pagination_change = function(){
$('.pagination a').attr('href',function(index,attr){
return attr.replace('?','&');
});
}
article_pagination_change();
You don't really need the .each() nor replacing ?page with &page unless you had extra ?s on your hrefs...
Sample JSFiddle