JavaScript - Jump to anchor - javascript

I'm trying to open a div with a jump to the anchor. The opening part is working but it's not jumping to the named anchor
This is my script:
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display = 'block');
window.location = '#' + id;
}
}
</script>
<a href="http://example.com" onclick="spoil('thanks');" title="hello">
<img src="images/gfx.png" alt="world" width="300" height="300"/>
</a>
Any ideas what's wrong with it?
Cheers.

Did you try window.location.hash = '#'+id;?

Looks like you're unhiding a spoiler div. If so, you can scroll the element into view as follows:
function spoil(id) {
var divid = document.getElementById(id);
divid.style.display = 'block';
divid.scrollIntoView(true);
return false;
}
...
<img src="images/gfx.png" alt="world" width="300" height="300"/>

Related

How Do I Get A Div to Completely Clear When I Toggle?

I'm attempting to have a div that runs split screen. The left panel will have multiple links, so the simple toggle I am using is ineffective. I need to be able to clear out the right div and replace it with the next selected link. (Something similar to this
https://www.itriagehealth.com/conditions) Right now, it just stacks the selected links.
I realized I can't do this with CSS alone and am still playing with javascript, but this is the concept I have so far:
https://jsfiddle.net/od9bnez4/1/
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
That fiddle should work, there's just an error in your function declaration, missing the closing brace }, and then change the JavaScript execution (with the gear next to 'JavaScript') to run as a tag in the <head> or <body>, not sure why onLoad isn't working there.
Something like this will do the trick, https://jsfiddle.net/od9bnez4/3/
The heart of it is this,
var left = document.getElementById("left");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
left.addEventListener('click', function() {
if (div1.style.display == "none") {
div1.style = "display: block;";
div2.style = "display: none;";
} else {
div1.style = "display: none;";
div2.style = "display: block;";
}
});
Obviously this only works for two elements and is very procedural. Typically someone would use something like jQuery for this, or even a framework like Angular or React to build a modularized component.
This is pretty easy. JQuery makes it more flexible.
<!DOCTYPE html>
<html>
<head>
<script>
function toggle()
{
var e = document.getElementById('diva');
var f = document.getElementById('divb');
if (f.style.display == 'none')
{
e.style.display = 'none';
f.style.display = 'block';
}
else
{
f.style.display = 'none';
e.style.display = 'block';
}
}
function togglejquery()
{
if ($('#divb').css('display') == 'none')
{
$('#diva').hide(); // or slideUp('fast');
$('#divb').show(); // or slideDown('fast');
}
else
{
$('#divb').hide();
$('#diva').show();
}
}
</script>
</head>
<body onload="positionScreenBottom();">
<div style="float:left; width:40%;">
<a href='#' onclick='toggle();'>Show A</a><br/>
<a href='#' onclick='toggle();'>Show B</a><br/>
</div>
<div style="float:left; width:60%;">
<div id='diva' style='float:left;'>Here is A</div>
<div id='divb' style='float:left; display:none;'>Here is B</div>
</div>
</body>
</html>

How to make image under div unclickable using jQuery or JavaScript?

This is my code
<div id="companyLogo">
<a href="index.php?module=Home&action=index" border="0">
<img src="themes/default/images/company_logo.png?v=hQ67b-0XWvvSENtpYeZcIw&logo_md5=1d2df0902a895af3e05dbc7c4e6758eb" alt="Company logo" border="0" height="15" width="141">
</a>
</div>
Now, I want to disable this logo. I am using this jquery code
var o = document.getElementById('companyLogo');
o.onmouseover = function() {
var a = this.getElementsByTagName('div');
for (x in a) {
a[x].onclick = function() { return false; };
}
};
but, it's not working. Now this image in header div. So, if I replace companyLogo id name of image with the header div, then it works, but it makes whole header div section unclickable. I want only few div's unclickable. So, may I know how to achieve that?
User this:
$('#companyLogo a').click(function(e) {
e.preventDefault();
});
your code works except you have to change div to a.
check this sample
Updated code
var o = document.getElementById('companyLogo');
o.onmouseover = function() {
var a = this.getElementsByTagName('a');
for (x in a) {
a[x].onclick = function() { return false; };
}
};
Try this:
$("#companyLogo a").attr("href", "#");

Link from one page to another to javascript show some content

I have the following script on a page that has a button to Show/Hide some content. I'd like to have a link from another page that would go to this page and open/show the content of one of the items. Is this possible to do?
Here's the onpage script and markup i'm using to to the Show/Hide;
Note: The '{trailitem:count}' is just an ExpressionEngine tag to add a unique number to each div. ExpressionEngine loops through and creates the divs with an incremental number, but the concept is the same so just imagine a series of divs with a unique ID.
<script>
function ToggleTrail{trailitem:count}() {
var toggler = document.getElementById("trail_toggler{trailitem:count}");
var first = document.getElementById("trail_first{trailitem:count}");
var reveal = document.getElementById("trail_reveal{trailitem:count}");
if(reveal.style.display != "block" && toggler.style.display != null) {
toggler.style.display = "block";
toggler.innerHTML = '» Hide';
first.style.display = "block";
reveal.style.display = "block";
}else{
toggler.style.display = "block";
toggler.innerHTML = '» Reveal More';
first.style.display = "block";
reveal.style.display = "none";
}
return false;
}
</script>
<div class="trailbox">
<a id="trail_toggler{trailitem:count}" class="button blackbutton viewallbutton" href="#" onclick="return ToggleTrail{trailitem:count}();">» Reveal More</a>
<div id="trail_first{trailitem:count}">
First content
</div>
<div id="trail_reveal{trailitem:count}">
Content to be revealed
</div>
</div>

Changing icon multiple times using onclick using javascript similar to gmail star icon

I have an icon image which changes into another image by this code
<html>
<script>
function changeImg(thisImg) {
if(prevImg) {
prevImg.src=prevSrc;
}
prevImg = thisImg;
prevSrc = thisImg.src;
thisImg.src = "flag_green.gif";
}
</script>
<body>
<img alt="" src="flag_blue.gif" id="imgClickAndChange" onclick="changeImg(this)" />
</body>
But I am unable to change it back to the previous image again after clicking the original image . please help. I want it similar like the gmail important star icon feature
Why not do it the easy way?
function changeImg(thisImg) {
if(thisImg.src == "flag_green.gif") {
thisImg.src = "flag_blue.gif";
} else {
thisImg.src = "flag_green.gif";
}
}
This might work:
var c = 0;
var images = ['src-for-first-image.jpg','src-for-second-image.jpg'];
$('.trigger').on('click', function() {
$('.image').attr('src', images[c % images.length]);
c++;
});
this lets you loop through many images.
Example:
jsfiddle
Try this: http://jsfiddle.net/pUbrv/
<script>
var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
var tmpImg = null;
function changeImg(thisImg) {
tmpImg = thisImg.src;
thisImg.src = altImg;
altImg = tmpImg;
}
</script>
<body>
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="changeImg(this)" />
</body>
----------------- EDITED ----------------------
It's probably easier to load both images and toggle the visibility, rather than changing the src of a single img tag.
Try something like this http://jsfiddle.net/qXYGp/:
<span onclick="toggleImg(this)">
<img src="http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg" />
<img src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" style="display: none"/>
</span>
and for JS:
toggleImg = function(container) {
var imgs = container.getElementsByTagName('img');
for (i in imgs) {
if (imgs[i].style.display == 'none')
imgs[i].style.display = 'inline';
else
imgs[i].style.display = 'none';
}
}

How to create infinit Iframe containing itself page?

So I try
document.write('<iframe src='+ location.href + ' width="468" height="60" ></iframe>');
But it seems not to be working at chrome...
This also does not work
<div id="main"></div>
function $(id)
{
return document.getElementById(id);
}
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);
And this does not work
function $(id)
{
return document.getElementById(id);
}
document.write('<div id="main"></div>');
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);
<iframe src="about:blank" onload="if(!this.t){this.t=1; var href=location.href.replace(/[\?\&]inf\=.+/i,''); href += href.indexOf('?') > -1 ? '&inf=' : '?inf='; this.src = href + Math.random();}"></iframe>
I tried on chrome.. seems ok :)
Edit
appended some regex for safe url
Looks like most browsers block that option, which is probably a good idea.
Tested with the code:
<iframe src="."></iframe>
On Chrome, I get this page:
http://jsbin.com/epimi4/

Categories