Focus to an image of a HTML page - javascript

I have 4 images that when I click them they show information under the images and when I click the last ones the images go under the page and whens the new page loads with that information I have to go down with scroller to see the image and information of the last image.
I want to put focus to the last image when the new page loading.
I do this but it's not working:
<script>
function setFocusToTextBox(){
document.getElementById("abc").focus();
}
</script>
<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>
Picture of the 4 images and when I click the last one I want to focus that image when the new page loads:

.focus() can normally only be applied to links or form inputs.
However, you can use it on arbitrary elements by giving the element a tabindex attribute.
This is usually a good idea for accessibility reasons anyway if you want to make use of onClick handlers, as this will help keyboard navigation and other accessibility tools understand that your element is supposed to be clickable.

I am not fully sure of why you want to focus the image you are ON, but try
function setFocusToTextBox(){
document.getElementById("abc").scrollIntoView();
}
If onload:
window.onload=function(){
document.getElementById("abc").scrollIntoView();
}

Related

Close popup on content click in jsImageBox

I am using the [jsImageBox jquery plugin][1]. It allows one to make an image gallery. Anyone know how to close the image popup by clicking anywhere on the image instead of having to click the x on top right.
]: http://static.tumblr.com/qrevc1p/3FWlxvqbb/jsibox_basic.js
You can use the jquery on click behavior to close the image dialog.
If your images div is with id="images"
$("#images").click(function(){
$("#images").hide(); // or change the element attribute which ever closes the div
});
Please share your code to help you better.
Looking through the code reveals that you can set your own methods of closing the image. Simply call the jsiBoxClose() function included in jsibox_basic.js.

While loading the page, hide and not load content of chosen div. On click load chosen div and its content

So, I've tried to googling for it, but seems like that it is not my strongest part.
Example: I have a div with embed a video inside, but to show that video I have to click first on div which opens and shows the video. The problem is that it loads on pageload. It makes browser lags while there is more than 4-5 of those div with videos. How can I make it to not load withing pageload, but only when a div is clicked and unload its content when it is clicked again.
$('.cont').hide();
$('h4').click(function () {
var $answer = $(this).next('.cont');
if ($answer.is(':hidden')) {
$answer.show();
} else {
$answer.hide();
}
});
This is what I have, but it is not as I described it
<div class="container">
<iframe new-src="http://linktoadditionalcode">Update your Browser!</iframe>
Load
Unload
</div>
<script>
function load(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src=frame.new-src;
}
function unload(elem){
frame=elem.parentElement.getElementsByTagName("iframe")[0];
frame.src="";
}
</script>
this loads/unloads the iframe. While your code just hides it, this completely loads/nloads it.

Clickable background div with links displayed on it opens both links

I am using a bootstrap carousel with a background image on each slide. Each slide has links displayed on top of it. I have reviewed a number of answers on SO, but none seemed to address this problem. Here is what a slide in the carousel looks like :
<div class="item">
<div class="banner-link">
<img src="myimage.jpg" height="486" width="1024" alt="image-description">
<div class="holder">
<div class="block">
<div class="links">
<strong class="title">The links</strong>
About Us
Contact
</div>
</div>
</div>
<input type="hidden" name="link" readonly value="http://www.google.com/" />
</div>
</div>
jQuery:
$(document).ready(function () {
$('div.banner-link').click(function () {
if ($(this).find("input").length) {
window.open($(this).find("input:first").val(),'_blank');
}
});
});
My problem is that when I click on any of the child links, both the child link AND the background image link are clicked. The child link opens in the main tab, and the background jQuery click event opens in a new tab.
I have tried a few things with z-index but it did not solve my problem. How can I allow the background image to be clicked everywhere BUT on the child links?
Any help is appreciated.
If I well understood your post, you want make it possible to click on the link without the background to be clicked right?
If so, you should have a look at the stopPropagation function (here is the doc : http://www.w3schools.com/jquery/event_stoppropagation.asp) , if not, I guess I misunderstood.
Have a good day !
If you want to only open a new link when the image is clicked you need to change your click event to only fire when the image is clicked and then look for the parent of this rather than this.
$(document).ready(function () {
$('div.banner-link img').click(function () {
if ($(this).parent().find("input").length) {
console.log($(this).parent().find("input:first").val());
}
});
});
You can probably clean this up and I changed it to log to console as open a new window for testing so very annoying. Works with the code you supplied over two different divs.
Edit with lots of words:
So this $(this) object will be the item clicked on. We have defined the element to be trigger on as the img tag inside any div with the class of banner-link. $(this) becomes the img object but we want to then fine the hidden input (Without moving it). To do this you do $(this).parent() to get the relevant div.banner-link, if you don't do it this way you're get any/all of the div.banner-link's due to having multiple on the page. Now you're in the right place you can continue your find as normal to find the first input and get the value of it.
Hope this helps!

angular trustAsHtml not reinserting content

I have 2 divs on a page. When user clicks button1 an iframe is loaded into div1 and the same is true for button2 and div2. The iframes are loaded through ajax and get trusted through the $sce.trustAsHtml. the html itself looks like this:
<div ng-bind-html="video.trustediframe"></div>
This will be the result:
<div ng-bind-html="video.trustediframe"><iframe id="iframe1"></iframe></div>
Everything works and I can see the video, but when the user clicks button2 I would like to close the feed to the first video and remove the iframe so I do angular.element('#iframe1').remove(). Now once the user clicks on button1 again the iframe wont get loaded do the DOM again although the div with the ng-bind-html="video.trustediframe" is still in place.
I've tried reassigning the video.trustediframe variable(which is a function as $sce.trustAsHtml returns a function) and then doing $scope.$apply but that didn't help reinserting the iframe. Are there any other approaches can I use to get this behaviour right?
I was able to get the desired behaviour by keeping track of the currently active player.
So with <div ng-if="video.isPlaying" ng-bind-html="video.trustediframe"> </div> I have only one active player per page and whenever the user switches between different tabs the previous player gets removed from dom.

show and hide iframes with a button

I have a webpage with 2 iframes, 1 underneath the other. I would like both iframes hidden when a user first clicks on the webpage. There will be 2 buttons, 1 above each iframe and the user must click on the button to show/hide the iframe
Here is what I tired(jQuery function) but it wont seem to work when I preview in chrome from expression web
jsfiddle.net/darego/Z62P7/2/
All you need to do is to call the function after the document.ready:
$(document).ready(function() {
hideToggle(".button1", ".iframe1");
hideToggle(".button2", ".iframe2");
});
Just placing it in document ready will not be enough.
You can make your function MUCH easier.
function hideToggle(elem) {
$(elem).toggle();
}
This means: If the element is visible > hide it, if it is hidden > show it.
But for your initializing (hide both divs) i would recommend doing it by css.
iframe {
display:none;
}
Also you need to setup click handlers for the buttons. If you need help on this write me a comment or edit your question please.

Categories

Resources