HREF to DIV value - javascript

I have this code:
text
and a DIV which is hidden
<div class="element" id="test"> x </div>
Is there a possibility to href to this id="test" ? I mean, I want to click "text" and open div with id="test"

If you change value to id (value isn't a supported attribute for the div element,) you can show the hidden div by clicking the link:
<div class="element" id="test" style="display:none;"> x </div>
text

You can create anchor links within the document, which cause the browser to scroll to the given element.
You need to use ID's for that:
text
<div id="mydiv"> x </div>
That is, the href of the link needs to point to the ID of the DIV element.
However, if you want the link to show the DIV, do something like this:
text
<div id="mydiv" style="display:none;">This div is hidden by default, but will be visible once the link is clicked ....</div>

<script>
function showDiv()
{
//Code to display the div
}
</script>
text
<div class="element" value="test"> x </div>
Haven't tested but it should work something like this

try this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function () {
$("a").click(function(){
$("#test").slideDown();
});
});
</script>
</head>
<body>
text
<div id="test" style="display:none">x</div>
</body>
</html>

You can do this using jquery
HTML:
<a href="#test" class="1" > text</a> //ENTER THE ID IN HREF
<div id="test" class="element" value="test"> x </div> // ENTER THE HREF AS DIV ID
Jquery:
$("a").click(function () {
var id_name = this.hash.substr(1); //gets the text after # in href
$("#" + id_name).show(); //it displays the div which has that id
});
P.S: you can use toggle instead of show if you want to hide/show onclick of <a> tag.
$("a").click(function () {
var id_name = this.hash.substr(1);
$("#" + id_name).show();
});
#test {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
text
<div id="test" class="element" value="test">x</div>

Related

jQuery how to remove an appended A tag with a given id

I just appended an A tag and I am trying to remove it, thank you for any help.
HTML:
<div>
<p id="header"></p>
</div>
jQuery:
$(document).ready(function (e) {
// Append A tag with id= Test1
$('#header').append("<a href='#' id='Test1'> Test1</a>");
// Remove the tag - it doesn't work.
$('#header').remove("a#Test1");
}
$(document).ready(function(e) {
// Append A tag with id= Test1
$('#header').append("<a href='#' id='Test1'> Test1</a>");
// Remove the tag - it doesn't work.
$('#header a#Test1').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p id="header"></p>
</div>
Use $('#header a#Test1').remove();
but all you need is $('#Test1').remove() to remove that specific element
You can also achieve it with this:
$('#header').empty();

Get URL of input tag after hover on image in Jquery

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">

Show link which is inside a hidden div

Let's say I have this inner link which is positioned inside a hidden div (display:none) - the div toggles when a button is clicked:
<a name="here">Show me!</a>
How can I make the element visible when somebody enters the url: mypageurl#here, without clicking the toggle button (make it visible by default when this specific link is entered)?
$().ready(function () {
var hash = $.trim(window.location.hash);
if (hash != '') {
var prt = $('[name="' + hash.substr(1) + '"]').parent();
prt.show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:none;"><a name="here">Show me!</a></div>
Full code!
You could use the CSS "visibility:hidden", then use JavaScript to change that to "visibility:visible" when someone enters a certain phrase.
Alternatively, you could just use display: ""; or display:block on the "display:none" div when the same action occurs, again using some JavaScript.
You can use the below script.
<script>
$(document).ready(function(){
var loc = document.location.hash;
if(loc == "#test")
{
$('#test').show();
}
});
</script>
Here is the source code of a simple page that I made:
<html>
<script src="http://code.jquery.com/jquery-latest.min.js "></script>
<body>
<div id="hide" style="display:none">
<a name="here">Show me!</a>
</div>
</body>
<script>
$(document).ready(function(){
if(document.location.href.search("#hide")>0){
$("#hide").toggle();
}
});
</script>
</html>
It will show the div with the id hide if the page has the text "#hide", else it remains hidden.

zClip - Copy only visible text

Hey hopefully this is an easy solution:
On click of the button I want to be able to copy only the text that is visible within the id="description". what am I doing wrong?
HTML:
<p id="description"> Test <span style="display:none">test2</span></p>
<button type="button" id="copy-description">Click Me!</button>
jQuery:
<script type="text/javascript" src="js/jquery.zclip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
// The link with ID "copy-description" will copy
// the text of the paragraph with ID "description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return $('input#dynamic').val();}
});
// The link with ID "copy-dynamic" will copy the current value
// of a dynamically changing input with the ID "dynamic"
});
</script>
It needs to be in a parent tag like a p tag and then call the span visible within that tag.
HTML:
<p id="description">
<span id=""> Test </span>
<span style="display:none; visibility:hidden;">test2</span>
</p>
jQuery:
$('#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('#description span:visible').text()
});

How to use Javascript or Jquery to toggle the visibility of a html div

I'm creating a basic site and I've got the following script that hides a div:
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Show/Hide Description
<div id="description">
<br>
<br>
<p>This is a test paragraph</p>
</div>
When I load the page, the default is that the text is shown. How can I hide the text inside the div each time the page is loaded?
I want the user to manually click the button to view the text.
EDIT:
I've now added a picture of a + symbol, so that a user can click the + and the text appears by using the following lines:
<h4>Backstory</h4>
<img alt="" style="width: 20px; height: 20px;" src="./images/headerExpand.png" a href="#" onclick="toggle_visibility('backstory');">Show/Hide Description</a>
<div id="backstory" style="display: none">
<br>
<p>This is a new block of text</p>
</div>
The ./images/headerExpand.png is the icon of the + symbol
How would I change the + icon to a - icon once the + icon has been clicked?
Thanks.
set the display to none
<div id="description" style="display: none">
A redesigned solution might look like
<!-- Add a class toggler and the id of the target element as the href-->
Show/Hide Description
<!-- Add a class hidden so that the element is hidden when the page loads -->
<div id="description" class="hidden">
<br/>
<br/>
<p>This is a test paragraph</p>
</div>
CSS
.hidden {
display: none;
}
then jQuery script
// dom ready handler
jQuery(function () {
//register a click handelr for all anchor elements with class toggler
$('a.toggler').click(function (e) {
//prevent the default action of the event
e.preventDefault();
//togger the visibility of the element targetted by the href
$($(this).attr('href')).toggle()
});
})
Demo: Fiddle
use symply CSS :
<p style="display:none;">This is a test paragraph</p>
you have 2 options , set the css property right in the html like the other answers
<div id="description" style="display: none">
or wrap your javascript in something to tell the page to run the stript on page load
using jQuery
$(document).ready(function(){
//your code
});
or
$(function(){
//your code
});
or regular old javascript
window.onload = function(){
//your code
});

Categories

Resources