I have a jQuery function like below.
function resultfucntion(state) {
if (!state.id) {
return state.text;
}
var state_output = $("<span data-tooltip='"+state.value +"'>" + state.text +
"<span>(" + state.text1 + ")</span></span>"
);
return state_output;
}
I would like to pass HTML code as content value to below CSS code
span:hover:before {
content: attr(data-tooltip);
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
I am getting output like below
I read this post.
Now I am looking for a JavaScript or jQuery way to pass HTML value as CSS content.
I'm not quite sure if it's possible to do it the way you want it. But this may be a solution how you could achieve the same goal:
$('span').hover(function() {
$(this).after(`<div class="tooltip-box">${$(this).attr('data-tooltip')}</div>`);
$('.tooltip-box').show();
}, function() {
$('.tooltip-box').hide();
});
.tooltip-box {
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-tooltip="I am <strong>strong</strong>, <em>emphasized</em> and <mark>marked</mark>.">Hyperlink</span>
Update
It is not clear to me what the point of your function should be. However, this is how you could combine the above code with your function:
function resultfucntion(state) {
if (!state.id) {
return state.text;
}
var state_output = `<span data-tooltip='${state.value}'>${state.text}<span>(${state.text1})</span></span>`;
return state_output;
}
const state = {
id: 1,
value: 'I am <strong>strong</strong>, <em>emphasized</em> and <mark>marked</mark>.',
text: 'Hyperlink',
text1: 1
}
$('body').append(resultfucntion(state));
$('span').hover(function() {
$(this).after(`<div class="tooltip-box">${$(this).attr('data-tooltip')}</div>`);
$('.tooltip-box').show();
}, function() {
$('.tooltip-box').hide();
});
.tooltip-box {
position: absolute;
padding: 5px 10px;
margin: -3px 0 0 180px;
background: orange;
color: white;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I've read similar questions and tried a few different things but nothing has worked so far.
I am trying to use the id of a div, to call a variable and play a sound.
let kick = new Howl({
src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
$(".pad").click(function(e){
var target = e.target.id;
console.log(this.id);
target.play();
})
.pad {
position: relative;
display: inline-block;
margin: auto;
height: 40px;
width: 55px;
background: #594F4D;
box-shadow: 1px 1px 1px grey;
border-radius: 5px;
padding: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad" id="kick"></div>
So what I understand from the question and code snippet is that you have a variable name same as the id of an HTML element, and you want to trigger the play method of the variable which matches the id.
A better way to keeping this information would be by using the data attribute, something like
<div class="pad" data-id="kick"></div>
But for now I am just giving a solution with id
First what you should do is keep all your instance created with new Howl into an object
let Howls = {};
Howls.kick = new Howl({
src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
// similarly add other sounds
Then in your click handler do this
$(".pad").click(function(e){
var target = e.target.id;
if(Howls[target]){
Howls[target].play();
}
})
Replace target.play with kick.play
let kick = new Howl({
src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
$(".pad").click(function(e){
var target = e.target.id;
console.log(this.id);
kick.play();
})
.pad {
position: relative;
display: inline-block;
margin: auto;
height: 40px;
width: 55px;
background: #594F4D;
box-shadow: 1px 1px 1px grey;
border-radius: 5px;
padding: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad" id="kick"></div>
Use eval :
let kick = new Howl({
src: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/kick.WAV']
});
$(".pad").click(function(e){
var target = e.target.id;
console.log(this.id);
eval(target).play();
})
.pad {
position: relative;
display: inline-block;
margin: auto;
height: 40px;
width: 55px;
background: #594F4D;
box-shadow: 1px 1px 1px grey;
border-radius: 5px;
padding: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.12/howler.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pad" id="kick"></div>
I've decided to try and make a Notes program as a learning experience. The point was to problem-solve on my own, but I'm pretty clueless as to why this won't work.
When I Shift + Double Click a note to rename it the note changes from a <div> to <input>, but the CSS stays the same. When I press enter (which submits the input) the changes back to <div>, and the CSS is there, but it is very small and doesn't take the shape of the text. Any idea why? Thanks!
Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="newList" onclick="newNote()">Create a new note</button>
<br></br>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function clickNote(){
if(event.shiftKey){
$( "div" ).click(function() {
$( this ).replaceWith( "<tr><td><form'><input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>" + "</input></form></td></tr>" );
});
} else {
location.href='list.html';
}
}
function enter(event){
var enter = event.which;
if (enter == 13){
var input = document.getElementById("newListName");
$( "input" ).keyup(function() {
$( this ).replaceWith( "<tr><td><div class='list' id='list' onclick='clickNote()'>" + input.value + "</div></td></tr>" );
});
}
}
function newNote(){
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
</script>
</body>
</html>
CSS:
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 116%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}
Am not sure why you are doing this, but you are adding td tr around the div which make it insde a table and create this issue as the width is defined with 10%. Remove it and it should work fine. You need also to correct the input tag.
function clickNote() {
if (event.shiftKey) {
$("div").click(function() {
$(this).replaceWith("<input class='rename' placeholder='Type here' onkeydown='enter(event)' id='newListName' autofocus>");
});
} else {
location.href = 'list.html';
}
}
function enter(event) {
var enter = event.which;
if (enter == 13) {
var input = document.getElementById("newListName");
$("input").keyup(function() {
$(this).replaceWith("<div class='list' id='list' onclick='clickNote()'>" + input.value + "</div>");
});
}
}
function newNote() {
var newNt = document.createElement("DIV");
var text = "Rename with Shift + Double Click"
newNt.textContent = text;
newNt.setAttribute('class', 'list');
newNt.setAttribute('id', 'list');
newNt.setAttribute("onclick", "clickNote()");
document.body.appendChild(newNt);
}
:root {
--main-color: #FFE033;
--secondary-color: #FEC82A;
}
.newList {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.list {
height: inherit;
width: 10%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
.rename {
height: 2.5em;
width: 100%;
padding: .4%;
position: relative;
border-bottom: 4px solid var(--secondary-color);
background: var(--main-color);
}
#list {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="newList" onclick="newNote()">Create a new note</button>
I'm new to javascript so be gentle ;)
I wrote a script which (on a webpage) gets a song artist/title and find the albumart on last.fm ..
I use a return to exit (and restart) when the existing track name is the same as there is no need t go through the whole script when it is. I noticed however that often it appears that the script still seems to run through a number of these cycles before picking up on a new entry in the textfile it reads for the names of artist and title. Is there any way to prevent this or can I use a better way to exit or restart the function?
Not sure if I explained this correctly, but I hope you get it.. thanks
var jsnURL = "http://ws.audioscrobbler.com/2.0/?autocorrect=1&method=track.getinfo&api_key=[mykeyisprivate]&format=json&";
var playURL = "./data/nowplaying.txt";
var noImg = "./data/speaker.png";
var albumImage = noImg;
var oldtitle = "none";
var image;
var doMe = function(){
$(document).ready(function(){
$.get(playURL, function(sngPlaying){
/* console.log(sngPlaying); */
var artist = sngPlaying.split(" - ")[0];
var title = sngPlaying.split(" - ")[1];
if ((artist === "not running") || (title === oldtitle)) {
return;
};
oldtitle = title;
/*
console.log("Artist: "+artist);
console.log("Title: "+title);
*/
$.getJSON(jsnURL+"artist="+artist.replace("&","%26")+"&track="+title, function(data){
try{
albumImage = data.track.album.image[2]['#text'];
if (albumImage) {
/* console.log("Found Album Art: "+albumImage); */
}
else {
/* console.log("Did not Find Album Art, using generic image"); */
albumImage = noImg;
};
}
catch(err) {
/* console.log("Something went wrong, using generic image"); */
albumImage = noImg;
}
$("#albumArt").html('<img class="albumArt" src='+albumImage+'>');
$("#trackArtist").html('<span>'+artist+'</span>');
$("#trackTitle").html('<span>'+title+'</span>');
});
});
});
};
setInterval(doMe, 2000);
#import url(https://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700);
#nwPlayContainer {
width: 450;
height: 50;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
/*background-color: black;
*/font-family: 'PT Sans Caption';
}
#albumArt {
width: 46px;
height: 46px;
padding-left: 2px;
padding-top: 2px;
border-radius: 50%;
}
.albumArt {
border-radius: 50%;
width:46px;
height:46px;
}
#trackArtist {
width: 398px;
height: 20px;
position: absolute;
text-align: left;
top: 7px;
left: 55px;
color: white;
font-size: 12px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#trackTitle {
width: 398px;
height: 20px;
position: absolute;
text-align: left;
top: 25px;
left: 55px;
color: white;
font-size: 12px;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
<div id=nwPlayContainer>
<div id="albumArt"></div>
<div id="trackArtist"></div>
<div id="trackTitle"></div>
</div>
I have built a simple task app that allows you to add different tasks. It works fine. I am not sure what is the best approach however to retain the data/HTML once the page is refreshed. I have heard of HTML5 session/localStorage but I am not sure if this would be the best method to use in this situation. Also, I would need help making this work if sessionStorage was a good choice.
window.onload = init;
function init() {
var generateBtn = document.getElementById("generate");
generateBtn.onclick = addTask;
var tasksWrapper = document.getElementById("tasksWrapper");
var taskDesc = document.getElementById("taskDesc");
}
var taskId = 0;
var taskBarArray = [];
function addTask() {
taskId++;
var taskBar = document.createElement("div");
var taskBarInput = document.createElement("input");
var taskBarDeleteBtn = document.createElement("input");
taskBar.setAttribute("id", taskId);
taskBar.setAttribute("class", "taskBar");
taskBarInput.setAttribute("class", "taskDesc");
taskBarInput.setAttribute("type", "text");
taskBarInput.setAttribute("placeholder", "Enter task");
function rmPlaceholder() {
taskBarInput.removeAttribute("placeholder", "Enter task");
}
function addPlaceholder() {
taskBarInput.setAttribute("placeholder", "Enter task");
}
taskBarInput.onfocus = rmPlaceholder;
taskBarInput.onblur = addPlaceholder;
taskBarInput.setAttribute("name", "taskDesc");
taskBarInput.setAttribute("value", taskDesc.value);
taskBarDeleteBtn.setAttribute("class", "deleteBtn");
taskBarDeleteBtn.setAttribute("type", "button");
taskBarDeleteBtn.setAttribute("value", "x");
var addTaskBar = tasksWrapper.appendChild(taskBar);
var targetTaskId = document.getElementById(taskId);
var addTaskBarInput = targetTaskId.appendChild(taskBarInput);
var AddTaskBarDeleteBtn = targetTaskId.appendChild(taskBarDeleteBtn);
taskBarArray.push(taskBar);
taskDesc.value = "";
taskBarDeleteBtn.onclick = removeTask;
function removeTask(e) {
taskBarDeleteBtn = e.target;
tasksWrapper.removeChild(taskBar);
taskBarArray.pop(e);
if (taskBarArray.length < 1) {
taskId = 0;
}
}
}
#main_wrapper {
margin: 0 auto;
max-width: 528px;
width: 100%;
height: 20px;
}
.taskBar {
width: 100%;
background: #333230;
border-bottom: 1px solid #fff;
border-radius: 10px;
}
.taskDesc {
margin: 10px 0 10px 10px;
background: none;
border: none;
outline: none;
font-size: 20px;
color: #fff;
text-transform: uppercase;
z-index: 9999;
}
.deleteBtn {
margin: 6px 6px 0 0;
padding: 6px;
width: 32px;
background: #8F0A09;
font-size: 15px;
color: #fff;
border-radius: 100px;
border-color: #000;
float: right;
outline: none;
}
#header {
padding: 10px;
background: #000;
border-bottom: 1px solid #fff;
border-radius: 10px;
}
#taskDesc {
padding: 2px 0;
width: 50%;
font-size: 20px;
}
#generate {
padding: 5px 83px;
background: #82CC12;
font-size: 20px;
border-color: #000;
border-radius: 5px;
outline: none;
}
::-webkit-input-placeholder {
color: #4C4B48;
}
::-moz-placeholder {
color: #4C4B48;
}
:-ms-placeholder {
color: #4C4B48;
}
<div id="main_wrapper">
<div id="header">
<input type="text" id="taskDesc"></input>
<input type="button" id="generate" value="Add task">
</div>
<div id="tasksWrapper">
</div>
</div>
Here I would use localStorage, it will be remembered even after the session has timed out. A session is probably ended if the user restarts their browser.
The only problems I see with localStorage is the 10 MB size limit on desktops (2 MB om mobile devices I think), and that it's not easy enough to get data from localStorage to the server. But localStorage would be a perfect fit for a TODO app with simple items.
I'm trying to create an animated menu that slides up and down. Unfortunately it's not working. I've checked the error console and there are no syntax errors. Here's my Javascript:
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
Here's the whole context:
<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>
<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px;
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width:
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255,
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>
<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')"> </div>
<div id="mainbuttontext">F</div>
</body>
I think I found your problem! It's something very strange and I can't explain it, but to get style in javascript, the css must be inline (to set a style it's not necessary).
So I modified your code by placing the css inline.
HTML :
<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>
<!--I wrote 100px just for the test, you can change it and modify the js-->
JS :
function showLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
var layerPosition=parseInt(hiddenLayer.style.bottom);
if(layerPosition>50)
{
hiddenLayer.style.bottom=(layerPosition+5)+"px";
setTimeout("showLayer()",20);
}
}
function hideLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
hiddenLayer.style.bottom="700px";
}
Fiddle : http://jsfiddle.net/8MWfV/
And here is a fiddle that shows that a not inline css doesn't works : http://jsfiddle.net/kfUrP/