There is a HTML content which users can freely edit. Thats OK, but I have to move all IFRAME into a DIV. Im trying with this:
$('#rolunk_content iframe').html ('<div>1' + $('#rolunk_content iframe').html() + '2</div>');
but that has no effect.
EDIT: a fiddle: http://jsfiddle.net/nE3jG/
That's because your code is trying to set the innerHTML of an iframe, which obviously won't work... And the rest of your logic is wrong too...
Try:
$("#rolunk_content iframe").each(function() {
var div = document.createElement('div'),
rel = this.nextSibling, par = this.parentNode;
div.appendChild(document.createTextNode("1"));
div.appendChild(this); // the iframe
div.appendChild(document.createTextNode("2"));
par.insertBefore(div,rel);
});
Vanilla JS may be lengthier to write, but it is more reliable in terms of doing what you expect it to do ;)
If you just want to move IFRAME into a DIV, you can use jQuery .append() API .
$("#newdiv").append($("#rolunk_content iframe"));
Your code could go like this:
<div id="rolunk_content">
<p><iframe src="...." width="200" height="200"></iframe></p>
</div>
<input id="d" type="button">
<hr>
<div id="newdiv">Your IFRAME will be moved here.</div>
And JavaScript:
$('#d').click(function() {
$("#newdiv").append($("#rolunk_content iframe"));
});
The Fiddle is here:
http://jsfiddle.net/2HrA4/
And the document of jQuery .append() is here:
https://api.jquery.com/append/
Related
So, I'm having trouble trying to figure out how to make the 2 left divs (volunteer sign-up and Request a volunteer) on my home page be clickable links. I currently have them change color when you hover over them but how do I make them link to there appropriate page. Any help w
http://partners.sbceo.org
Wrap the div in an anchor tag.
<a href="your-link-here">
<div></div>
</a>
<div class="mydiv" data-href="http://stackoverflow.com"></div>
<script>
$('.mydiv').on('click', function(){
window.location = $(this).data('href');
})
</script>
this way you could use more than one clickable div
Give the div a class or other identifier. Then using jQuery do something like:
$('identifier').click(function(){
window.location = "your url";
});
None jQuery:
<div id="hello"></div>
function linkTo(url){
window.location = url;
}
el = document.getElementById('hello');
el.onclick = linkTo('some website');
i can't see the link but you can do this using Javascript:
<div style="cursor: pointer;" onclick="window.location='http://google.com/'">
</div>
I read that Angularjs directives require a different approach than jquery. I am new to angularjs, so it will be great if somebody can explain how to use directives for this simple example. If you click on bottom div, then it moves (re-parent) the top image to the bottom div. I could add this jquery code on ng-click... but is there a better way?
JQUERY INTENT:
$("#bottom").click(function(){
$("#myimage").appendTo("#bottom");
});
ANGULARJS:
<div ng-app="myapp">
<div data-ng-controller="mycontroller">
<div id="top" style="background-color:red;width:200px;height:200px">
<img id="myimage" src="//placehold.it/150x150">
</div>
<div id="bottom" style="background-color:green;width:200px;height:200px">
</div>
</div>
</div>
Instead of listening for a click in jQuery, you can use Angular's ng-click directive to specify a function to call when the element is clicked and you can use the ng-if directive to add/remove the image, for example...
<div ng-click="appendImage()" id="bottom" style="background-color:green;width:200px;height:200px">
<img ng-if="showImage" id="myimage" src="//placehold.it/150x150">
</div>
Then in your controller...
angular.controller('myController', function ($scope) {
$scope.showImage = false;
$scope.appendImage = function (event) {
$scope.showImage = true;
};
});
A key difference between plain jQuery and Angular is that in jQuery you have to write code to manipulate the DOM yourself (like appending the image). If you use directives properly in Angular, you simply make changes to the $scope and directives will update the DOM for you automatically
I have the following HTML5 and Java Script code.
PROBLEM: This code will not display the first video clip at index 0.
The code plays all the remaining video clips (from index 1 on-wards) as normal.
The code is available live at
http://mvl.ecs.soton.ac.uk:8080/JustPlayList.jsp
This code will obviously run in HTML5 enabled browsers.
Any help about how to play the first video clip will be really appreciated.
Many thanks,
<div id="VideoContainer"></div>
<div id="num"></div> <script>
var URLArray = new Array();
URLArray[0] = "/VideoContents/AtomVideo/AtomPart1/AtomPart1C.mp4";
URLArray[1] = "/VideoContents/AtomVideo/AtomPart2/AtomPart2C.mp4";
URLArray[2] = "/VideoContents/AtomVideo/AtomPart4/AtomPart4C.mp4";
URLArray[3] = "/VideoContents/AtomVideo/AtomPart5/AtomPart5C.mp4";
URLArray[4] = "/VideoContents/AtomVideo/AtomPart6/AtomPart6C.mp4";
URLArray[5] = "/VideoContents/AtomVideo/AtomPart7/AtomPart7C.mp4";
</script>
<script>
$(document).ready(function()
{
NextFrag();
});
var index=0;
function NextFrag(){
if (index < URLArray.length)
{
alert("Index Value is :" + index);
$("#VideoContainer").html('<video id="video1" controls autoplay > "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
$("#num").html('Displaying Part : ' +(index+1) + ' ' );
index++;
$("#video1").bind( "ended", NextFrag);
}
}
</script>
There does not appear to be anything wrong with your code, but I think you are getting a weird interaction with jQuery mobile. So the fix seems to be the following. Wrap your HTML in a <div data-role="page"> to tell jQM that this is a mobile page and then put the code in pageinit instead of document.ready. Here is a working demo: http://jsfiddle.net/ezanker/Ep52A/
<div data-role="page">
<div data-role="content">
<center>
<h1>Test Page</h1><h3>Test Page</h3><br /><br />
<div id="VideoContainer"></div>
<div id="num"></div>
<button>Go to Previous Part</button>
<button>Go to Next Part</button>
</center>
</div>
</div>
Here is the code that calls nextFrag:
var index = 0;
$(document).on("pageinit", function(){
NextFrag();
});
UPDATE: jQM Doc explains the problem: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/pages/
Also Note: If your body contains no data-role="page" divs, jQuery Mobile wraps the entire contents of the body within a page div as explained above. jQuery Mobile is using jQuery's wrapAll() method to do this which looks for any script tags inside the content being wrapped, and loads each script source via XHR. If scripts are present in the body, the browser ends up loading them twice. We therefore strongly recommend that jQuery Mobile documents with scripts in their body also contain a div with data-role="page".
So your script in the page was being loaded twice upon initialization calling NextFrag twice and ending up on the second fragment instead of the first.
Is searching possible in html tags on the behalf of ID? for example to find div tag having id="abc".
I can use document.getElementByID("abc"). But i need parent div + its inner HTML in return of searching. i.e if this div has childs
Try this :-
<script >
function showHTML(){
var vinner=document.getElementByID("abc").innerHTML;
var totalinner="<div >"+vinner+"</div>";
alert(totalinner);
}
</script>
HTML part:-
<body onload="showHTML();">
<div id="abc">
Hello inside abc
<div>
Inner div inside abc tag.
</div>
</div>
</body>
Its working fine. You can get Attributes here.
It's hard to understand what you want to achieve:
document.getElementById("abc").parentNode.innerHTML;
//will return <div id="abc"> and other items from parrent
document.getElementById("abc").getAttribute("name");
//will atribute of <div id="abc">
if (document.getElementById("abc").hasChildNodes()) {
// It has at least one
}
Using jQuery is much simplier, you could do that:
$("#abc").attr('id') //retunrs id
$("#abc").attr('class') //returns classes
//or other manipulations
One way to do this is to use outerHTML, which:
gets the serialized HTML fragment describing the element including its descendants.
Given the following HTML:
<div id="abc" data-attr="A custom data-* attribute">Some text in the div.</div>
The following JavaScript will log, in the console, the HTML of the element of id equal to abc:
var htmlString = document.getElementById('abc').outerHTML;
console.log(htmlString);
JS Fiddle demo.
References:
outerHTML.
outerHTML compatibility.
how to change properties of a parent div on hover of child div.
can it be done with pure css ?
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}
Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.):
<div id="parentId" class="parent">
<div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
</div>
</div>
<script type="text/javascript">
function doOnMouseOver() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
parentNode.setAttribute('class', parentClass);
}
function doOnMouseOut() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
parentNode.setAttribute('class', parentClass);
}
</script>
Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.
Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.
jQuery actually makes your job easier but you should try doing this with javascript at least once.
I hope it helps.
Is there a reason you do not want to use JavaScript or JQuery?
You could simply:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
There is no parent selector in CSS.
You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors