I have this script: JsBin
It allows to display the corresponding favicon to a certain url. As you can see the favicon is appended to the url, however I need it to append to the class="class" How can I do this? I don't see anything in the code that I can change in order to make this work.
I've modified the script to include in the "config" var a "target" property. This "target" is nothing more than a jQuery selector (such as .class, in this case) which defaults to "this".
So:
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' }); //aplies to $('.class')
//These 2 are the same
jQuery('#hello').favicons({insert: 'insertBefore', target: '#hello' }); //target is the same as "this"
jQuery('#hello').favicons({insert: 'insertBefore'});
I hope this works out for you!
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script type="text/javascript">
jQuery.fn.favicons = function (conf) {
var config = jQuery.extend({
insert: 'appendTo',
target: this
}, conf);
return this.each(function () {
jQuery('a[href^="http://"]', this).each(function () {
var link = jQuery(this);
var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1') + '/favicon.ico';
var faviconIMG = jQuery('<img src="' + '" alt="" />')[config.insert]($(config.target));
var extImg = new Image();
extImg.src = faviconURL;
if (extImg.complete) {
faviconIMG.attr('src', faviconURL);
}
else {
extImg.onload = function () {
faviconIMG.attr('src', faviconURL);
};
}
});
});
};
$(function(){
jQuery('#hello').favicons({insert: 'insertBefore', target: '.class' });
});
</script>
</head>
<body>
<p id="hello">Google</p>
<p class="class">apend favicon over her instead</p>
</body>
</html>
Related
Are there any Event Listeners that can be attached to a word. So when the word is clicked, information like a definition can be displayed on the page. Using jQuery
Thanks,
Adam
Sorry for not posting code. I have to make it so that when the user clicks on the name of a person in the list, the box of data on the right side of the screen fills with the description of the location of the artwork. Which is in my JSON file.
Here is my code so far
<!DOCTYPE html>
<hmtl lang="en">
<head>
<meta charset="utf-8" />
<title>AJAX</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="jquery.js" type="application/javascript"></script>
<script src="ajax.js" type="application/javascript"></script>
</head>
<body>
<div id="loaded-data"></div>
<div id="result-box"></div>
</body>
</hmtl>
$(function() {
let request = $.ajax({
method: 'GET',
url : 'people.json',
dataType: 'json',
});
request.done(function(data) {
let list = data.body.list;
let resultBox = $('#result-box');
let unorderedList = $('<ul>');
resultBox.append(unorderedList);
for (let person of list) {
let listItem = $('<li>');
listItem.text(person.name);
listItem.attr('data-url', person.links[0].href);
unorderedList.append(listItem);
}
});
request.fail(function(response) {
console.log('ERROR: ' + response.statusText);
});
});
{
"links":[{"rel":"self","href":"http://www.philart.net/api/people.json"},{"rel":"parent","href":"http://www.philart.net/api.json"}],
"head":{"title":"People","type":"listnav"},
"body":{
"list":[
{"name":"Adam","links":[{"rel":"self","href":"http://www.philart.net/api/people/325.json"}]},
{"name":"Abigail Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/157.json"}]},
{"name":"John Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/410.json"}]},
{"name":"Samuel Adams","links":[{"rel":"self","href":"http://www.philart.net/api/people/439.json"}]},
{"name":"Lin Zexu","links":[{"rel":"self","href":"http://www.philart.net/api/people/347.json"}]},
{"name":"James A. Zimble","links":[{"rel":"self","href":"http://www.philart.net/api/people/345.json"}]},
{"name":"Doris Zimmerman","links":[{"rel":"self","href":"http://www.philart.net/api/people/171.json"}]}
]
}
}
Teemu has already mentioned a way to accomplish this behavior in the comment. You can do it as follows
// handle click and add class
$(".word").click(function() {
var word = $(this).text()
alert(word);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p class="word">Hello</p>
</div>
You could replace the word and wrap it with a div.
$('p').html(function(index, value) {
return value.replace(/\b(here)\b/g, '<div class ="event">here</div>');
});
$('.event').click(function() {
console.log('definition');
});
<p>This is the information: Click here.</p>
sap.ui.commons.DatePicker has a property "locale" to set language of datepicker.But I dont find any property as such in "sap.m.DatePicker" to change the locale.Is there any possible way this can be done?
There is no direct property for locale in DatePicker. However, there is a somewhat clumsy trick to overcome this, and unfortunately it uses private attribute "_oDisplayFormat", which stores an instance of sap.ui.core.format.DateFormat. The snippet demonstrating this is below:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="UI5 DatePicker with non-default locale"/>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>UI5 DatePicker Example with different Locales</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m,sap.ui.core'>
</script>
<script>
var oVBox = new sap.m.VBox({ width: "50%"});
var oFrenchFormat;
var oEnglishFormat;
var oDatePicker = new sap.m.DatePicker({ dateFormat: "long" });
oDatePicker.setValue(new Date());
oVBox.addItem(oDatePicker);
oVBox.addItem(new sap.m.Button({
text: "Set French locale",
press: function(oEvent) {
if (!oFrenchFormat) {
oFrenchFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("fr_FR"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oFrenchFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.addItem(new sap.m.Button({
text: "Set US locale",
press: function(oEvent) {
if (!oEnglishFormat) {
oEnglishFormat = sap.ui.core.format.DateFormat.getDateInstance({ style: "full"}, new sap.ui.core.Locale("en_US"));
}
var oDate = oDatePicker.getValue();
oDatePicker._oDisplayFormat = oEnglishFormat;
oDatePicker.setDisplayFormat("long");
oDatePicker.setValue(oDate);
}
}));
oVBox.placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
I am in a serious bind. I want to toggle the visibility of some elements I am pulling from an API. The API allows me to make a get request for stories and I am pulling the headlines and images. I can get up to 15 requests at a time from the API. What I want to do is show one request at a time and not all of them at once. When I make the request I get them all at once.
I was thinking of putting the images and headlines into a list and making each child visible one at a time. My jQuery code is below:
var main = function () {
var url = 'http://devapi.xxxxxxx.com/v1/en/stories/latest?format=json&apikey=xxxxxxxxxxxxxxxx';
$.getJSON(url, function(xxxxxx_response) {
//console.log(xxxxx_response);
xxxxxxxxxx_response.stories.forEach(function(data) {
console.log(data);
var $img = $("<img>");
var $p = $("<p>");
$img.attr({
"src": data.largeimage,
"hidden": true,
"id": []
});
$p.attr("hidden", true).append(data.title['#cdata-section']);
$("main .story").append($img, $p);
$("button").click(function(img, p) {
//$img.attr('hidden', false);
//$p.attr('hidden', false);
//s$img.slideToggle('slow');
$img.attr('hidden', false);
$p.attr('hidden', false);
});
});
});
}
$(document).ready(main);
And here is my HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="">
<title>Media on the Move</title>
<style type="text/css">
img {
width: 360px;
heigh: auto;
}
</style>
</head>
<body>
<main>
<button>Next</button>
<div class="story"></div>
</main>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="lib/app.js"></script>
</body>
</html>
Please help!!!
Create your function like this:-
store all the stories in the array, let's suppose story_list and length of story_list in length_story.
Then create an iterative function as follow
function nestedStoryShow(array1 , length1){
//terminating codition
if (length1 == 0){
return;
}
else{
var $img = $("<img>");
var $p = $("<p>");
$img.attr({
"src": array1[array1.length- length1].largeimage,
"id": []
});
$p.append(array1[array1.length- length1].title['#cdata-section']);
$("main .story").append($img, $p);
setTimeout(
function()
{
$img.hide();
$p.hide();
nestedStoryShow(array1 , length1-1);
}, 3000);/*Your Story stays for 3 second and then it is hidden*/
}
}
Attach this function to your button after the ajax call has been successful recieved.
success:function(data){
story_list //array of story
length_story //length
$(button).click(function(){
nestedStoryShow(story_list,length_story);
});
}
So I have a website with a Header.html. In the header are three buttons. I've copied the Header.html into all of my other pages with jquery's load. Now what I would like to do is change the colour of one of the buttons depending on the page it's on. But when I use document.GetElementById in javascript it can't find the div of the button I've copied from the Header.html
Here's the Header.html
<div id="Header_Wrapper">
<div id="Header_PageLinksWrapper">
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_Games" href="..\Pages\Games.html">Games</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_AboutMe" href="..\Pages\AboutMe.html">About Me</a>
</div>
<div class="Header_PageLink">
<a class="Header_PageLinkText" id="PageLink_CV" href="..\Pages\CV.html">CV</a>
</div>
</div>
</div>
The javascript file:
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html");
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
}
);
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = document.getElementById(id);
if (divElement == null)
{
console.log("Could not find element " + id);
}
divElement.style.color = 0xffffff;
}
One of the pages (eg. Games.html)
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Adabelle Combrink - Games</title>
<link rel="stylesheet" type="text/css" href="..\Templates\Header.css"/>
<link rel="stylesheet" type="text/css" href="..\Templates\Page.css"/>
<link rel="stylesheet" type="text/css" href="..\Pages\Games.css"/>
<script type="text/javascript" src="..\Scripts\jQuery.js"></script>
<script type="text/javascript" src="..\Scripts\Defaults.js"></script>
</head>
<body>
<header>
<div id="Header"></div>
</header>
</body>
</html>
What this gives me in the console is Could not find element PageLink_Games. I don't get that error if I use something that is in Games.html like Header.
Is there any other way of doing the same thing. I know you can include files into eachother with php but I haven't gotten that right and don't seem to be able to run .php files in Visual Studio.
jQuery.load has a success callback. Use it to assure your code is only executed after the loading is complete.
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", null, function() {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
Also your SetPageLinkColours function can be improved with jQuery:
function SetPageLinkColours(aPath)
{
var firstIndex = aPath.lastIndexOf("/");
var lastIndex = aPath.indexOf(".html");
var id = "PageLink_" + aPath.slice(firstIndex + 1, lastIndex);
var divElement = $("#"+id);
if (!divElement.length)
{
console.log("Could not find element " + id);
}
else
{
divElement.css('color','white');
}
}
load function makes async request , so your code tries to find element before it rely appears. U need to use load function callback http://api.jquery.com/load/
$(document).ready(
function ()
{
$("#Header").load("..\\Templates\\Header.html", function () {
var filePath = window.location.pathname;
SetPageLinkColours(filePath);
});
}
);
I have an Html file like this:
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">
/* lightBox class */
function box (id1,id2) {
this.boxBackgroundDiv = document.getElementById (id1);
this.boxWorkAreaDiv = document.getElementById (id2);
}
lightBox.prototype.setBackgroundColor = function(c) {
this.boxBackgroundDiv.style.backgroundColor = c;
alert('Hello back');
};
function init (id1,id2)
{
boxObj = new box (id1,id2);
alert ("Hello");
}
</script>
</head>
<body onload="init('box1','box2')">
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>
</body>
</html>
Now when I call my init function the way it is in this code via it works fine. But if I do as below via window.onload, it does not work. its not able to get the div ids in this case. But I need div ids to crate objs for my class.
<!doctype html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style/boxClass.css" />
<script type="text/javascript">
/* lightBox class */
function box (id1,id2) {
this.boxBackgroundDiv = document.getElementById (id1);
this.boxWorkAreaDiv = document.getElementById (id2);
}
lightBox.prototype.setBackgroundColor = function(c) {
this.boxBackgroundDiv.style.backgroundColor = c;
alert('Hello back');
};
function init (id1,id2)
{
boxObj = new box (id1,id2);
alert ("Hello");
}
window.onload = init ("box1",box2);
</script>
</head>
<body>
<div id="lightbox1" class="boxBackground">I am here</div>
<div id="lightbox2" class="boxWorkArea"><button onclick="boxObj.setBackgroundColor('Red')">I am here</button></div>
</body>
</html>
Two issues:
1) You are missing quotes around box2 parameter,
2) You are assigning the return value of init function (which here is a void) to window.onload handler.
You should assign the onload handler as below:
window.onload = function(){
init ("box1","box2");
}