I have a bit of what seems like a complicated issue(to me at least)
I've got an external javascript file generating html content for me. It's for tweets. It gives each one a individual ID, which I can see in the browser but of which is obviously not in my index.html.
The JS generates something like this in the browser http://i.imgur.com/8yxLYBa.png
Heres the generated div
<div class="twitter-article" id="tw1"><div class="twitter-pic"><img src="https://pbs.twimg.com/profile_images/461533054800900097/5h4n1K31_normal.jpeg" twitter-feed-icon.png"="" width="42" height="42" alt="twitter icon"></div><div class="twitter-text"><p><span class="tweetprofilelink"><strong>JGD</strong><br> #jdrawsthings</span></p><b><span class="tweet-time"></span></b><d>2h, Glasgow. Favorites: 0 Retweets: 0</d><br><c>Literally desperate and just need to secure a nice room in a nice flat close to DJCAD so I can move in June 20th</c></div><div class="favourite-item" id="fav1"><button class="favouriteButton" id="favBut1"></button></div><div id="twitter-actions" style="opacity: 0; margin-top: -20px; display: none;"><div class="intent" id="intent-reply"></div><div class="intent" id="intent-retweet"></div><div class="intent" id="intent-fave"></div></div></div>
Each one has a button assigned to it, which each also have individual IDs.
I'm wanting to use the clone function to copy across the contents of say, '#tw1' into '#faveDiv'. #faveDiv been a div on my index.html page.
<div id="favouriteStreamHolder">
<div id="favouriteStream" style="display: none;">
<div id="faveDiv"></div>
</div>
</div>
Here is the clone function I'm trying
$("input#favBut1").live( 'click', function(){
$('#faveDiv').html($('#tw1').html());
});
There's to much going on that relies on PHP that putting it into a simulator wouldn't achieve anything. Basically, that JS creates this. i.imgur.com/8yxLYBa.png A stream of 25 tweets of which the content is created in that js function having been pulled from a JSON file. I'm under the assumption that the .clone() function should copy all within the div and duplicate it into the div ive specified. At the moment. It's doing nothing, the div is just empty. Bit new to this, sorry. If theres anything else you need to know. Just say.
Any idea why this isn't working?
Try this (pattern)
html
<div id="favouriteStreamHolder">
<div id="favouriteStream">
<div id="faveDiv"></div>
<!--
duplicate `favBut1` in `feedHTML`,
substitute `id` `feed` for `favBut1`
-->
<input type="button" id="feed" value="click" />
</div>
</div>
js
$(function () {
// var feedHTML = `$.parseHTML(feedHTML)`
var feedHTML = $.parseHTML('<div class="twitter-article" id="tw1">..</div>');
$(document).on("click", "#feed", function (e) {
e.preventDefault();
$(e.target).siblings("#faveDiv").html($(feedHTML));
});
})
jsfiddle http://jsfiddle.net/guest271314/ReK9u/
Related
I am really not great at web stuff, so I am apologizing in advance for a potentially poor explanation of my problem.
Basically, I have a webpage which utilizes the handlebars js templating. Unfortunately, this means that many of my div elements are contained within javascript tags like the following:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
......
</div>
<div class="descript">
.....
</div>
</script>
My intent is to grab one of these div elements using jquery.find(), but from what I understand, the html within the script tags is not treated as part of the dom...so jquery does not see it as a dom element. I was wondering if there is any other way I could go about this. Some more code is included.
Here is another more explicit explanation in case the one I gave above was a little muddled: I am working on a personal website and would like to embed a project I have been working on in unity3d, but I need to add/remove elements based on whether or not the client has the unity3d web player installed. Normally I would get a particular element with
var $missingScreen = jQuery("#unityPlayer").find(".missing");
where 'missing' is simply an element inside unityPlayer which displays a link if the client does not have unity3d. I am also using some javascript templating to make my site look pretty and as a result, I have this problem:
<script type="text/x-handlebars" data-template-name="index">
<div class="row intro">
<div class="intro-text">Hi, I'm *****</div>
</div>
<div class="descript">
<p>
Here's a Project I have been working on in case I am of interest to you:
</p>
</div>
<div class="content">
<div id="unityPlayer">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
</div>
<p class="footer">« created with Unity »</p>
</script>
Jquery cannot access the missing element. Is there any way to do this? Thanks for any help you can give me and sorry again for my inexperience.
EDIT* some people might want to know: here is how I determine whether or not to show the missing div. Another note; everything works fine if I remove the script tags...it is only when I put html within the script tags that it becomes inaccessible to jquery.
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
$missingScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "temmp.unity3d");
});
Instead of
var $missingScreen = jQuery("#unityPlayer").find(".missing");
I would try out
var $missingScreen = jQuery("#unityPlayer").children(".missing");
or
var $missingScreen = jQuery("#unityPlayer .missing");
Don't forget the space between Player and .missing!
I hope it works.
I need to create several DIVs on the fly. The first DIV will be created on the <body> and next 3 DIVs will be inside the newly created DIV. Below is my approach in creating this. Please let me know if this is the best way to do it.
I want to create this HTML in jQuery.
<div id="aTextDV" class="ui-widget-content">
<div class="txmoPos">
<img src="img/markers/img1.png"/>
</div>
<div class="txdlPos" id="dleTx" onclick="dTxt('aTextDV')">
<img src="img/markers/img3.png"/>
</div>
<div class="txrsPos">
<img src="img/markers/img2.png"/>
</div>
</div>
jQuery (I've created only 2 DIVs as for this example)
$(document).ready(function() {
$('button').on("click", function() {
$("body").append(
$('<div/>')
.attr("id", "aTextDV")
.addClass("ui-widget-content")
);
$('#aTextDV').append(
$('<div/>')
.addClass("txmoPos")
.attr("src", "img/markers/move.png")
);
})
})
$(document).ready(function() {
$('button').on("click", function() {
$('body').append('<div id="aTextDV" class="ui-widget-content"></div>');
$('#aTextDV').append('<div class="txmoPos"><img src="img/markers/move.png"/></div>');
$('#aTextDV').append('<div class="txdlPos" id="dleTx" onclick="dTxt("aTextDV")"><img src="img/markers/delete.png"/></div>');
$('#aTextDV').append('<div class="txrsPos"><img src="img/markers/resize.png"/></div>');
})
})
step 1: minify the html.
i use this site:
http://www.willpeavy.com/minifier/
step 2: make the minified html a javascript string, example:
var $divdata = '<div class="foo"><p>some child content</p><div><div></div></div></div>';
step 3: append the div to the container
$('#aTextDV').append($divdata);
EDIT
Always store backups of the normal (unminified)html. editing the minified html will be a pain in the butt later on. better to keep the unminified html for quick edits and repeat the process each time you need to edit.
If the content you need is static - you can use jquery.load method - it's much more easier.
My issue involves multiple DIVs that display:block or display:none each with their own anchor tag. The main problem is that I have recommissioned the JS code that runs this feature without completely understanding it. All I need is a way to toggle all of the DIVs with a single "Show All/Hide All" link. I cannot wrap my head around it.
I have tried absolutely everything that my exceptionally limited grasp will allow - which consists mostly of swinging my arms in the dark and hoping I accidently build a miracle. Since that hasn't worked I am shamefully seeking help.
The only thing that makes this question unique are all the variables with this specific issue -
An (almost) working example can be found at: www.robertmeans.com/menu.htm
The JS code:
imageX01='plus';
imageX02='plusEven';
function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}
function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}
The HTML
<div id="task_item01">
<img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" />
Div #1
</div>
<div style="display:none;" id="div01">
Content 1
</div>
<!-- ******************************** Item 1 End **************************** -->
<!-- ******************************** Item 2 Start ************************** -->
<div id="task_item02">
<img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" />
Div #2
</div>
<div style="display:none;" id="div02">
Content 2
</div>
I have spent countless hours trying to work this out on my own. Any help is deeply appreciated.
Ok first of all, it seems like way too much code to me... you can do this very easily by using jQuery. I have made an example here: http://jsfiddle.net/Nr2f6/4/
Here is some simple html to help you better understand what is being done:
<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
I have superb items in this div... the world is about to understand just how awesome I am!
</div>
<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
I have amazing contents in this div. I want to show them to the world!
</div>
as you can see above, there is no inline css. All the styling (display: none) should be placed separately, to not conflict with what you are trying to do. So simply place it in a separate css file.Then run this code:
$("div[id^=item]").click(function(){
var reference2open = $(this).attr("id");
//get the data-rel attribute associated
$("div[data-rel='"+reference2open+"']").slideToggle();
$("span",this).toggleClass('minus');
});
$("#all").click(function(){
if($(this).hasClass('close')){
$("div[data-rel^=item]").slideUp();
$("div[id^=item] span").removeClass('minus');
$("#all").removeClass('close');
$("#all").html('open them all');
}else{
//open and close them all by clicking
$("div[data-rel^=item]").each(function(){
if($(this).is(':hidden')){
$(this).slideDown();
$("div[id^=item] span").addClass('minus');
$("#all").html('close them all');
}
});
//change the button to close
$("#all").addClass('close');
}
//$("div[id^=item] span").toggleClass('minus');
});
****ADDED IN THE TOGGLE PLUS AND MINUS SIGNS USING CSS****
.plus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
.minus{
background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
width: 33px;
height: 33px;
display: inline-block;
}
Do not forget to include your jQuery file! Hope this helps :)
Just wanted to add in some details for better understanding:
div[id^=item]: Is saying whenever a div is clicked that has an id that starts with (^=) item, run the code.
$("div[data-rel='"+reference2open+"']").slideToggle(): is saying take the id from the div that was clicked and find the content box where with the same name but in the data-rel attribute. The slide it down, if it is already down, slide it back up (toggle). You do not have to use a slide effect, I just thought it was more fun!
Then last but not least, the function you were looking for: How to open them all at once. Again we are using the (^=) to find all of the divs.
$("div[data-rel^=item").slideToggle();: So here we are saying to jQuery, hey toggle all the boxes that have a data-rel attribute that starts with (^=) item.
This last part is pretty neat, because you can create many instances of the item-? boxes and this code will work for any number of them. You can also add the same code to a different div, like even and odd, and toggle all the even and all the odd elements accordingly.
You could assign a specific class to all the things you want to toggle, then loop through all of them with a toggle function.
jQuery noob here. Sorry if the question is really simple, I haven't been exposed to much jquery, though I am trying to learn.
I am attempting to move a DOM Element from one place to another, but I seem to be running into some errors.
When I attempt to test to see if the DOM exists I get indications that the element is not in the DOM:
if (jQuery('.ls-yourlogo').length) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
I am trying to move .ls-yourlogo into .ls-inner.
I have tried several different things including:
jQuery('#layerslider_1').children('img').appendTo('#layerslider_1').children('.ls-inner');
also
jQuery('.ls-yourlogo').appendTo('.ls-inner');
I do know that the .ls-yourlogo and the .ls-inner DOM elements are both created with jQuery. I'm not sure if that is what is causing the problem.
I am currently working with the Layer slider plugin for WordPress: http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246
<div id="slider">
<script type="text/javascript"></script>
<script type="text/javascript"></script>
<div class="ls-wp-fullwidth-container" style="height: 317px;">
<div class="ls-wp-fullwidth-helper" style="height: 317px; width: 1349px; left: 0px;">
<div id="layerslider_1" class="ls-wp-container ls-container ls-noskin" style="width: 1050px; height: 317px; margin: 0px auto; visibility: visible;">
<div class="ls-webkit-hack"></div>
<div class="ls-inner">
<div class="ls-layer ls-active">
<img class="ls-s-1">
<p ></p>
<p ></p>
</div>
<div class="ls-layer" >
<img class="ls-s-1">
</div>
<div class="ls-circle-timer"></div>
<div class="ls-loading-container"></div>
<div class="ls-thumbnail-wrapper"></div>
<div class="ls-shadow"></div>
<img class="ls-yourlogo">
</div>
</div>
Thank you for your time.
Finally found a solution for moving an element the Layer Slider DOM.
jQuery('#layerslider_1').layerSlider({
hoverPrevNext : false,
cbInit : function(element){
jQuery('.ls-yourlogo').appendTo('.ls-inner');
jQuery('.ls-thumbnail-slide > a').addClass('ls-thumbnail-style');
}
});
The ID is of your layer slider that exists on the page. Mine happened to be 1 so its #layerslider_1. The next important part is the callback cbInit, inside this function you can make your appends and what ever other markup changes you want to make to the DOM.
Hope this helps someone.
try this:
suggestion instead of you typing jQuery everytime use $ instead it makes it easier for you.
if ($('.ls-yourlogo')) {
alert('Found!');
} else {
alert('NOT FOUND!');
}
Also i would suggestion using #ids than classes because ids are lot faster to get in Jquery than classes. And Make sure you call your the script that makes .is-yourlogo class first before checking if it exits.
see this jsfiddleThe </div> tags in your html are not properly closed off, that might be contributing to part of your problem. If I close a few off and run my code, it removes the element with the class='ls-your-logo' and appends it to the <div class='ls-inner'> which ends up being the same place as it was before. Perhaps if you look at my fiddle, you can better close the div tags to how you want it to properly look
I'm trying to use jQuery's click function to apply a hover state to a selected div, without differentiating the div's in the JavaScript. I'm currently using:
$(document).ready(function(){
$(".project").click(function() {
$("a.expand").removeClass("hovered");
$("a.expand").addClass("hovered");
$(".project_full").hide();
var selected_tab = $(this).find("a").attr("href");
$(selected_tab).fadeIn();
return false;
});
With the HTML:
<div class="project first project_gizmoscoop">
<div class="title">
GizmoScoop!
<div class="date">2012</div>
</div>
<a class="expand" title="(Caption)" href="#project_1">GizmoScoop!</a>
</div>
<div class="project project_sc">
<div class="title">
Striking Code
<div class="date">2011</div>
</div>
<a class="expand" title="(Caption)" href="#project_2">Striking Code</a>
</div>
The .hovered class is applied to the clicked link (specific styles from an external CSS file). However, everything is being chosen. (See http://www.codeisdna.com for an example).
I know what I'm doing wrong (I should be specifying the individual ID's or using HTML5 data attributes), but I'm stuck unnecessarily. I feel like a complete newb right now, that I can't do something this simple (although I've done more advanced stuff).
You simply need to take advantage of jQuery's flexibility (and good programming practice) and reduce your scope accordingly. You're already doing something similar with your variable definition. For example, to target only those a.expand elements inside the instance of .project that's clicked:
$(".project").click(function() {
$(this).find("a.expand").removeClass("hovered");
...
});
$(".expand").click(function() {
$(this).addClass("hovered");
..
});