Why this code don't work properly?
<img src="picture.jpg" id="picture"/>
<script>
document.getElementById('picture').onkeydown = function() {alert('tekst');}
</script>
Your image doesn't have focus so it won't listen to the 'onkeydown' event. I'm not sure if it is possible to give an image focus in order for your onkeydown event to work.
Instead you could place your image within an a-tag which can have focus and therefore can listen to the onkeydown event.
Something like this:
<a id="picture" href="#">
<img src="picture.jpg" />
</a>
<script>
// The a tag
var picture = document.getElementById('picture');
// You have to put focus on the atag (or any element that you want to have for you onkeydown event.
picture.focus();
// Now your event will work
picture.onkeydown = function() {
alert('tekst');
}
</script>
Related
I want to fire an method of a nested custom element when the document scroll position gets close to the bottom using iron-scroll-threshold.
So, I have an the index.html file like this:
<link rel="import" href="/src/my-app.html">
<body>
<my-app></my-app>
</body>
</html>
and inside the my-app element, I have my-questions element like this:
<iron-pages
selected="[[page]]"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-questions name="questions"></my-questions>
<my-view404 name="view404"></my-view404>
</iron-pages>
Now finally inside the my-questions element, I have
<ul id="question-list">
<template is="dom-repeat" items="[[questions]]" sort="_computeSort" as="question">
<poll-result questionkey="[[question.$key]]"></poll-result>
</template>
</ul>
<iron-scroll-threshold on-lower-threshold="_loadMoreQuestions" lower-threshold="400" id="threshold" lower-triggered="{{nearBottom}}" scroll-target="document">
</iron-scroll-threshold>
and my loadMoreQuestions function:
_loadMoreQuestions: function(){
console.log('load more questions fired');
var questionCount = this.$.questionQuery.limitToLast;
this.$.questionQuery.limitToLast = questionCount + 10;
var threshold=this.$.threshold;
threshold.clearTriggers();
},
Now, the _loadMoreQuestions method fires once when the page is loaded, but never again. How can I made this method to fire whenever the document is scrolled 400px from the bottom?
How do I show a hidden adjacent div on Prototype.js? Here is my current code:
<button id="checkAnswer" onclick="checkAnswer2()">Check Answer</button>
<p class="feedback">Feedback:</p>
Script:
function checkAnswer2 () {
$('checkAnswer').next().show();
}
If you put the ID in the function, you’re going to have to make a new function for each question/answer pair. How about this:
<button class=“checkAnswer”>Check Answer</button>
<p class=“feedback”>Feedback:</p>
script
$$('.feedback').invoke('hide');
$(document).on('click', '.checkAnswer', function(evt, elm){
elm.next('p').show();
});
Now you can repeat as many of these as you want on the page, and each button will always manage whatever p follows it.
I have a javascript function that I need to give her an 'ID' of div from onClick img tag
Is there any one that can help me I don't know what to do:
Html:
<img onclick="imgClicked"></img>
<div id="foo">...</div>
Javascript:
<script type = "text/javascript">
window.imgClicked = function(){
var div = document.getElementById("foo");
...//do anything you want...
}
</script>
You can find the div , on which the image is clicked by using event.target.nodeName
Setup an click event handler for Image, then u can use above to find out the div of the image clicked.hope it helps..
EDIT italics = more detailed explanation added to the question. Thanks.
I'm building a jQuery Mobile site which has a Gallery section.
The gallery has a series of thumbnails on the top of the screen.
Users click on the thumbnail to load in new content, that being a larger image, text, and potentially audio on some of them.
It's at this point that I'm not sure what to do: the way jQuery Mobile works, it's geared towards loading new pages, or views. But I just want to inject new content in a container on the current page.
To be clear, when the user clicks on another thumbnail, a new image replaces the content of the container with new content.
I have two questions:
I'm not sure how to structure the dynamic content. I was thinking i'd create an html file for each item, which as a rule always contains a title, information and sometimes, audio.
I'm not sure how to script this functionality in jQuery Mobile. It's obviously Ajax, but I'm not familiar with it yet, especially since jQuery Mobile has it's own methods in place already which seems to redefine behaviors in a way that's contradictory to this approach described here.
Here is a code explanation of what i'm trying to do:
<!-- Galleries -->
<div data-role="page" id="galleries">
<div data-role="content" role="main">
This is the Selection UI, if i click on thumb2.jpg, it'd
fill #content-holder with the whatever html is in content2.php
<div id="thumb-carousel">
<img src="thumb1.jpg">
<img src="thumb2.jpg">
<img src="thumb3.jpg">
<img src="thumb4.jpg">
<img src="thumb5.jpg">
<img src="thumb6.jpg">
<img src="thumb7.jpg">
<img src="thumb8.jpg">
<img src="thumb9.jpg">
</div>
<!-- This is the container, currently it's filled
with the kinda stuff i need to put in it. -->
<div id="content-holder">
<img src="myimage1.jpg"/>
<p>Artwork Title</p>
<p>Caption</p>
<audio>//mp3</audio>
</div>
</div>
</div>
//remember to use event delegation because you never know when the page will be in the DOM
$(document).delegate('#galleries', 'pageinit', function () {
//bind a `click` event handler to each thumbnail link
$('#thumb-carousel').children().bind('click', function () {
$.ajax({
url : $(this).attr('href'),
success : function (serverResponse) {
//select the container,
//then fade it out,
//change it's HTML to the response from the AJAX request,
//and fade it back in
$('#content-holder').fadeOut(500, function () {
$(this).html(serverResponse).fadeIn(500);
});
},
error : function (jqXHR, textStatus, errorThrown) {
//remember to handle errors so your page doesn't seem broken to the user
}
});
//prevent the default behavior of the link, which is to navigate to the `href` attribute
return false;
});
});
This expects your server-response to be valid HTML markup that is ready to inject into the DOM, meaning no <html> or <body> tags, just what you want to add to the DOM:
<img src="..." />
<span>TITLE</span>
<audio src="..."></audio>
Here are some docs for ya:
$.ajax(): http://api.jquery.com/jquery.ajax
.closest(): http://api.jquery.com/closest
.fadeIn(): http://api.jquery.com/fadein
The jQuery plugin cycle looks for elements of class slideshow. I want to add this class to a <ul> element to make a slideshow out of its <li>s. But when I add the slideshow class to the <ul> element, all <li> disappear and I get no slideshow whatsoever.
The HTML looks like this:
<ul>
<li>
<h3 class="expander">...</h3>
<div class="content">
<p>...</p>
<h4>...</h4>
<ul class="slideshow">
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
...
</ul>
As you see, the slideshow <ul> is included in another list. This parent list consists of headers which reveal the content of each list item on click. I am hiding all the .contents programmatically when the DOM is ready. Then, I add a click listener to the .expanders so they can show the hidden .contents.
It is inside these .contentss that I have .slideshows which use the cycle plugin to cycle through their list items.
The other weird thing about all this is that the slideshow's worked perfectly before I transformed my headers into toggles for their associated content. Indeed, when I added the toggle functionality to the headers, the slides are no longer visible. But then if I take away the slideshow class, they are visible again. Of course, they no longer have slideshow functionnality...
Here is the javascript for all this:
$(document).ready(function()
{
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
});
Any idea what could be causing this problem?
Apparently, I needed to move the cycle code above the toggle code, like this:
$(document).ready(function()
{
$('.slideshow').each(function() {
var parent = $(this).parent();
$(this).cycle(
{
fx: 'scrollHorz',
easing: 'easeInOutCirc',
timeout: 0,
nowrap: 1
});
});
var expanders = $('.expander');
expanders.each(function()
{
$('.content', $(this).parent()).toggle();
$(this).click(function()
{
$('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
});
});
});
I don't know why this works though, so better answers would be appreciated.