Getting image src name javascript

Getting image src name javascript - javascript

I would like to have
album_name = Precious
How do I get that?
<html>
<head>
<title></title>
</head>
<body>
<div id="ps_slider" class="ps_slider">
<div id="ps_albums">
<div class="ps_album">
<div class="ps_image">
<div class="ps_img">
<img src="puppies/Snoopy/primary.jpg" alt="Dachshund Puppy Thumbnail"/>
</div>
</div>
</div>
<div class="ps_album">
<div class="ps_image">
<div class="ps_img">
<img src="puppies/Precious/primary.jpg" alt="Dachshund Puppy Thumbnail"/>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $ps_albums = $('#ps_albums');
$ps_albums.children('div').bind('click',function(){
var $elem = $(this);
var album_name = 'album' + parseInt($elem.index() + 1);
console.log(album_name);
});
});
</script>
</body>
</html>

$(function() {
$(".ps_img").click(function(){
var album = $(this).find("img").attr("src").split("/")[1];
alert(album);
});
});

This should do the trick:
$ps_albums.children('div').bind('click',function(){
var album_name = $(this).find('img').attr('src').split('/')[1];
});

Try this:
$(function() {
$('#ps_albums .ps_album').click(function() {
var $elem = $(this);
var $img = $elem.find('img');
var album_name = $img.attr('src').split('/')[1];
});
});

Related

Unable to add data "innerHTML" to <div> tags using getElementByID()

I'm very new to HTML< Javascript concepts. So kindly go easy on me.
I created 2 tags & want to selectively add data to each div tag using their ID, onload, but the the below code isn't adding "H1" & "h2" to each div tag.
Did i miss something ?
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = document.getElementById(tab1).innerHTML + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = document.getElementById(tab1).innerHTML + "<p>h2</p>";
}
</script>
</body>
</html>

There are a few things wrong with this. Here is the code amended:
function populatehtmlTab1() {
document.getElementById('tab1').innerHTML = "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById('tab2').innerHTML = "<p>h2</p>";
}
function loadHtml(){
populatehtmlTab1();
populatehtmlTab2();
}
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body onload="loadHtml()">
<div id="tab1" >
<p>i1</p>
</div>
<div id="tab2">
<p>i2</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
First the element id selector must be a string:
document.getElementById('tab1')
second you just need to assign the innerHTML directly:
document.getElementById('tab2').innerHTML = "<p>h2</p>";
Third you should use onload on the body, I wrapped both your functions into another function in my amended code.

You can use:
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = $('#tab1').val() + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = $('#tab1').val() + "<p>h2</p>";
}
</script>
</body>
</html>

div elements do not have onload so your functions are not being called.
Use insertAdjacentHTML for the insertion
Pass a string to getElementById.
function populatehtmlTab1() {
document.getElementById("tab1").insertAdjacentHTML("beforeend", "<p>h1</p>");
}
function populatehtmlTab2() {
document.getElementById("tab2").insertAdjacentHTML("beforeend", "<p>h2</p>");
}
document.addEventListener("DOMContentLoaded", function() {
populatehtmlTab1();
populatehtmlTab2();
});
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>

Sorry for mixing jquery
<html>
<head>
<title>Titlehere</title>
<p> Hello></p>
</head>
<body>
<div id="tab1" onload="populatehtmlTab1()">
<p>i1</p>
</div>
<div id="tab2" onload="populatehtmlTab2()">
<p>i2</p>
</div>
<script type="text/javascript">
function populatehtmlTab1() {
document.getElementById(tab1).innerHTML = document.getElementById(tab1).value + "<p>h1</p>";
}
function populatehtmlTab2() {
document.getElementById(tab2).innerHTML = document.getElementById(tab1).value + "<p>h2</p>";
}
</script>
</body>
</html>
If the element 'value' is not detected in 'innerHTML', you can generate variables:
var tab1Value = document.getElementById(tab1).value;

toggle function doesn't work on added input

the toggle function work in descrip and example as shown, but the problem is it does not work when I add a new definition via the input from the user. please help!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.descrip').click(function(){
$(this).next('.def').slideToggle("slow");
});
});
function addDef () {
//window.alert (1);
var def= document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> "+def+" </div>";
$(document).ready(function(){});
}
</script>
</head>
<body>
<div class = "descrip"> descrip</div>
<div class = "def"> example </div>
enter def for apple: <input type= "text" id = "defInput"> </input> <br> <br>
<button onclick="addDef()">ADD</button>
<div id = "addf"> </div>
</body>
</html>

Use event delegation
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(this).on("click", ".descrip", function() {
$(this).next('.def').slideToggle("slow");
});
});
function addDef() {
//window.alert (1);
var def = document.getElementById("defInput").value;
//window.alert (def);
document.getElementById("addf").innerHTML += "<div class= 'descrip'> descrip </div>";
document.getElementById("addf").innerHTML += "<div class= 'def'> " + def + " </div>";
}
</script>
</head>
<body>
<div class="descrip">descrip</div>
<div class="def">example</div>
enter def for apple:
<input type="text" id="defInput">
<br>
<br>
<button onclick="addDef()">ADD</button>
<div id="addf"></div>
</body>
</html>

display thumbnails and title youtube api v3 javascript

I use the following code to complete a search by keyword. How can I display just the thumbnails and titles on my web page? I can't figure out how to extract that info from the search results and display it on my page.
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
</div>
<div id="search-container">
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('my_api_key');
gapi.client.load('youtube', 'v3', function() {
makeRequest();
});
}
function makeRequest() {
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet'
});
request.execute(function(response) {
var str = JSON.stringify(response.result);
$('#search-container').html('<pre>' + str + '</pre>');
});
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>

I figured out one way to do it:
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('api_key_here');
gapi.client.load('youtube', 'v3', function() {
makeRequest();
});
}
function makeRequest() {
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');
})
})
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>

How to simulate the click event

I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!

$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo

Javascript Expand/Collapse

I'm quite new to Javascript.
I've been trying to figure this one out but can't seem to.
So my question is...
What do I need to do in the code so that when you have 'one' open and when you click 'two', the content below 'one' collapses?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Help!</title>
</head>
<body>
<div>
one
</div>
<div id="workdiv1" class="workdiv" style="display:none">content 1
</div>
</div>
<div class="storybottom">
two
</div>
<div id="workdiv2" class="workdiv" style="display:none">content 2
</div>
</div>
<div class="storybottom">
three
</div>
<div id="workdiv3" class="workdiv" style="display:none">content 3
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$('#work').hide();
$('a.title').click(function() {
var id = $(this).attr('id');
$('#workdiv' + id).toggle(150);
return false;
});
});
</script>
</body>
</html>

$('a.title').click(function(){
var target = $(this).closest('div').next('div');
var mode = target.is(':visible');
target.siblings('div.workdiv').hide();
if(!mode) target.show(); else target.hide();
});
Like this?

http://jsfiddle.net/jbabey/kSQfy/1/
$(document).ready(function() {
$('a.title').click(function() {
var correspondingDiv = $(this).parent().next('div');
if (!correspondingDiv.is(':hidden')) {
return;
}
// hide other divs
$('.workdiv').hide(150);
// show this one
correspondingDiv.toggle(150);
});
});

We Keep Coding

JavaScript is the programming language of the Web.

Getting image src name javascript - javascript

$(function() { $(".ps_img").click(function(){ var album = $(this).find("img").attr("src").split("/")[1]; alert(album); }); });

This should do the trick: $ps_albums.children('div').bind('click',function(){ var album_name = $(this).find('img').attr('src').split('/')[1]; });

Try this: $(function() { $('#ps_albums .ps_album').click(function() { var $elem = $(this); var $img = $elem.find('img'); var album_name = $img.attr('src').split('/')[1]; }); });

Related

Unable to add data "innerHTML" to <div> tags using getElementByID()

toggle function doesn't work on added input

display thumbnails and title youtube api v3 javascript

How to simulate the click event

Javascript Expand/Collapse

Categories

Resources