from title to data-* by jQuery? - javascript

I have a div element
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>
After magic jQuery script I want that it will be like that
<div class="test2" data-enter="fadeIn" data-exit="fadeOut scaleOut" data-duration="1.2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" > blahblahblah
</div>
So I tried to manipulate with this
<script>
$( document ).ready(function() {
$("[title*='space']").each(function() {
var title = $(this).attr('title');
var titleArray = title.split(" ");
$(this).attr("data-enter", titleArray[1]);
$(this).attr("data-exit", titleArray[2]);
$(this).attr("data-duration", titleArray[3]);
$(this).removeAttr('title');
});
});
</script>
But it doesn't work properly, cause I have data-exit="fadeOut scaleOut" with two properties and my script is for div like that
<div class="test2" title="space fadeIn fadeout 1.2" >blahblahblah</div>
But I don't want it.
Maybe you know right solution for this example. Maybe some find or replaceWith function will help for this.
Thanks. I hope you understood my question.

I think this is job for regular expressions. Something like this:
$("[title*='space']").each(function() {
var title = this.title,
enter = this.title.match(/enter=(.*?)(\s|$)/),
exit = this.title.match(/exit=(.*?)(\s|$)/),
duration = this.title.match(/dur=(.*?)(\s|$)/)
$(this).attr("data-enter", enter[1]);
$(this).attr("data-exit", exit[1].replace(/,/, ' '));
$(this).attr("data-duration", duration[1]);
$(this).removeAttr('title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test2" title="space enter=fadeIn exit=fadeout,scaleOut dur=1.2" >blahblahblah</div>

Related

How to insertAdjacentHTML between 2 different divs

I need to get my div between 2 divs inside my template. I can only edit it with external HTML, JS.
Template looks like this:
<main id="content-in">
<div id="homepage-banner"> XXX </div>
<div id="carousel-banner"> XXX </div>
And I need to get my img and a href <div id="moveOut"> XXX </div> between these 2.
I have it like this now which works ok:
<script>
function addCode() {
var d1 = document.getElementById('content-in');
d1.insertAdjacentHTML('afterbegin', '<div id="moveOut"><img src="https://example.png" alt=""></div>');
}
</script>
but I need to move it.
Thank you for your help.
You need to insert after the homepage-banner DIV.
var d1 = document.getElementById("homepage-banner");
d1.insertAdjacentHTML('afterend', '<div id="moveOut"><img src="https://example.png" alt=""></div>');

JQuery DOM get Binded attribudes

I have a code
$(".showerPr").on('click', '.prototypeDiv',function(){
});
HTML looks like
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'><div>
</div>
Is there some solution to get showerPr data-id and prototypeDiv data-id seperately?
somethink like
$(this).attr('data-id');
$(this).before().attr('data-id');
:-D thank you.
.showerPr isn't before() the .prototypeDiv element, it's the parent element
var proto = $(this).data('id');
var shower = $(this).parent().data('id');
$(".showerPr").on('click', '.prototypeDiv',function(){
var proto = $(this).data('id');
var shower = $(this).parent().data('id');
$('#result').html('prototypeDiv : ' + proto + '<br />' + 'showerPr : ' + shower)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'>Click Me !!!<div>
</div>
<br/><br/>
<div id="result"></div>
#adeneo is right, .showerPr is the parent element. You may want to check the Traversing Methods for jQuery.
Here are the snippets.
$(".prototypeDiv").on('click', function(){
alert($(this).data('id'));
alert($(this).parent().data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='showerPr' data-id='3'>
<div class='prototypeDiv' data-id='5'>123<div>
</div>

Why is this simple javascript not doing anything?

http://jsfiddle.net/AHd34/2/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append(jA);
});
<body>
<div id="content">
<div id="newLists" style="border:none;">
<!-- I'm going to need to reorganize this css so the above line does not need to happen -->
<p id="newListTitle"><span id="newListSpan">Here is a list </span></p>
<div id="listContainer">
</div>
</div>
</div>
I've never used jsfiddle before and it seems to just not be working at all. Probably something very simple and silly.
2 things:
first: in the console you can see that createTextElement doesn't exist
second: you declare a variable $jA and then append a variable jA (without the $).
Here's the working code:
http://jsfiddle.net/AHd34/3/
$(document).ready(function(){
var a = document.createTextNode('AAA');
$jA = $(a);
$('#listContainer').append($jA);
});
Try this
$(document).ready(function(){
var a =document.createElement("a");
a.innerHTML="AAA";
$('#listContainer').append(a);
});
http://jsfiddle.net/AHd34/7/

Linking a div to the href inside it

I want to make the whole staff-container linked to the first href inside of it. (The one in staff-picture). How do I write this with jQuery? I'm pretty confused with attr() and I know that I have to use it.
In the following HTML, the jQuery should make staff-container linked to google.com.
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
EDIT: Thanks to the answers I used this jQuery:
$('.staff-container').click(function() {
window.location.href = $(this).find('a').attr('href');
});
If there is no link inside staff-picture I do NOT want it to link the email. If jQuery can't find the link in staff-picture, I want the click to do nothing.
Try like this
$('.staff-container').click(function(e) {
if($(this).find('a').attr('href'))
window.location.href = $(this).find('a').attr('href');
e.preventDafault();
});
like this..??If you want specifically first anchor tag then you can give like
window.location.href = $(this).find('a').eq(0).attr('href');
Try this:
$('.staff-container').click(function() {
var $first_link = $(this).find('a').first();
window.location.href = $first_link.attr('href');
});
Pure JS version: should be a bit faster than jQuery
<script>
function link(loc){
var href=loc.getElementsByTagName('a')[0].href;
console.log(this);
console.log(href);
loc.setAttribute("onclick","window.location.href='"+href+"'");
loc.removeAttribute("onmouseover","");
}
</script>
<div class="staff-container" onmouseover="link(this)">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
email#wcskids.net</p>
</div>
</div>
Working tested

Open sub link in the same page in html

In html I am having the following tags:
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
On Clicking on 2011-2012 or on 2012-2013 I want to set display property of div tag.
I am using the following Javascript code for this and I am calling the Javascript function in body tag. The output is showing style and display is not an object or property.
<script language="javascript">
function clickHnadler()
{
var xid= document.getElementsByTagName("span");
var xsp= xid[0].id;
alert("Span id is "+xsp);
if(xsp.charAt(0)=="M")
{
var oC = document.all("C"& xsp.substring(1,2));
if(oC.STYLE.display == "none")
{
oC.Style.Display = "";
}
else{
oC.Style.Display = "none";
}
}
}
</script>
use jquery:
you can pass in the function the element or the Id:
ex:
<span id=M26>2011-2012</span>
function clickHnadler(element)
{
var id = $(element > span).attr(id);
id[0] = 'c'; //not the nicest way, maybe use a replace or something like that
$(id).show(); //or $(id).css('display','list');
}
You may use clickHandler has following way,
function clickHandler(e) {
window.document.links[0].handleEvent(e);
}
You need to bind event spacifically to elements you want to handle click for. for more information please refer following link,
http://docs.oracle.com/cd/E19957-01/816-6409-10/evnt.htm#1009606
Based on what i understand from your question, I come up with this.
<script type="text/javascript" src="jquery1.8.js"></script>
<span id=M26>2011-2012</span>
<div id=c26 STYLE="display:none">
2011-2012 details</div>
<br />
<span id=M27>2012-2013</span>
<div id=c26 STYLE="display:none">
2012-2013 details
</div>

Categories

Resources