Is possible to getting parent element from the location of the called function?
my case:
<div class="alphabet">
<div class="lorem">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="ipsum">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="dolor">
<div class="amet">
<script type="text/javascript">
getParent();
</script>
</div>
</div>
</div>
<script>
function getParent(){
//......????????.......//
}
</script>
Expected Result (Console Log):
getParent() > the parent is lorem
getParent() > the parent is ipsum
getParent() > the parent is amet
This should work, although my intuition tells me you're doing something wrong.
<script>
function getParent(){
var me = document.currentScript;
var parent = me.parentElement;
console.log(parent.className);
return parent;
}
</script>
<div class="lorem">
<script type="text/javascript">
getParent();
</script>
</div>
<div class="ipsum">
<script type="text/javascript">
getParent();
</script>
</div>
https://jsfiddle.net/8tjsa8fw/
Related
Want to create a DIV which toggle when I click on youtube subscription button. Also, I want to hide the Youtube button.
This seems easy, but Jquery toggle method is not working on youtube sub button.
CODE ↓
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
//Your code here
$('#xx2').click(){
$('#cc').toggle();
}
});
</script>
<div id="cc" style="display:none;" >
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" ></div>
</div>
See this photograph :
Please close the script tag and provide some text inside the xx2 div.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(e){
$('#cc').toggle();
});
});
</script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default" >text</div>
</div>
Syntax error
Change $(document) instead of $("document")
And click function declaration was wrong. initiate the click function of xx2 and the toggle inside the click function
$(document).ready(function(e) {
$('#xx2').click(function() {
$('#cc').toggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="cc" style="display:none;">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe" data-channelid="UCwevqbHI8ppBSvVKESoLpPQ" data-layout="full" data-count="default">xx</div>
</div>
there is error in the syntax of jquery, use following cod:
<script type="text/javascript">
$(document).ready(function(e){
$('#xx2').click(function(){
$('#cc').toggle();
});
});
</script>
Maybe the classic way will work:
HTML:
<div id="cc">
<h1>this is a hidden item</h1>
</div>
<div id="btn">
<div id="xx2" class="g-ytsubscribe"
data-channelid="UCwevqbHI8ppBSvVKESoLpPQ"
data-layout="full" data-count="default">
xxx <!-- The xxx is used for better hitting -->
</div>
</div>
I removed the style attribute from #cc.
Added following CSS:
div.cc {display:none;}
Javascript:
$(document).ready(function(){
$('#xx2').click(function() {
$('#cc').toggleClass("cc");
});
});
So far I understand your problem right, this did work according Jsfiddle.net .
ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);
var app = angular.module('tabstripApp');
app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);
<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');
app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>
<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>
<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?
<div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>
DEMO
I have a set of nested <div> and on completion of the page load need to take action on the inner <div> of each of the outer <div>
In the .ready() of the page, I iterate through each of the $('.outer').each() calling the doSomething() function, which then attempts to find() the <div class='inner'>.
The problem is that the .find() method is failing with
Object doesn't support property or method 'find'
Below is the view source (from IE11) to demonstrate the issue.
Markup
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div class="outer">
<div class="inner">
1
</div>
</div>
<div class="outer">
<div class="inner">
2
</div>
</div>
<div class="outer">
<div class="inner">
3
</div>
</div>
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/jquery.fittext.js"></script>
<script src="Scripts/jquery.cycle.lite.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/respond.js"></script>
<script src="Scripts/moment.js"></script>
<script type="text/javascript">
$(function () {
$(".outer").each(function () { doSomething(this); })
})
function doSomething(divO) {
debugger;
var divI = divO.find("inner");
console.log(divI);
}
</script>
When the debugger breaks, evaluating divO.tagName on IDE (Visual Studio) it says that it is in fact a Div tag
use:
var divI = $(divO).find(".inner");
Trying to add content into individual div-containers I stumbled on the command .innerHTML, which I tried to implement accordingly. Strangely I get the following error:
*Uncaught TypeError: Cannot read property 'innerHTML' of null *
I'm running the code over my local Apache server if that makes any difference.
index.html
<html>
<head>
<title>Welcome</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
</body>
</html>
javascript.js
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
Put it in window.onload
window.onload = function()
var navidiv = document.getElementById('left');
navidiv.innerHTML += "FirstElement";
}
The element has to be present in the DOM, before you can access it in JS
You have to ensure that your DOM elements have loaded before accessing them with javascript.
Since you are using jquery, your javascript can simply be
$(function() {
var $navidiv = $('#left');
$navidiv.html($navidiv.html() + 'FirstElement');
});
try this
html
<div id="header">
<h1>Startseite</h1>
</div>
<div id="container">
<div id="left">
Navigation
</div>
<div id="content"></div>
<div id="right"></div>
<div class="clr"></div>
</div>
javascript.js
$( document ).ready(function() {
var navdiv=$("#left").html();
$("#left").html(navdiv+"FirstElement");
});
see DEMO
I have Two pages. One is
<html>
<head>
<script language="javascript">
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</head>
<body>
<a name="div1" href="javascript:;" onmousedown="toggleDiv('div1');"><p><b>Section 1</b> </p></a>
<div id="div1" style="display:none">
Content for section 1.
</div>
<a name="div2" href="javascript:;" onmousedown="toggleDiv('div2');"><p><b>Section 2</b></p></a>
<div id="div2" style="display:none">
Content for section 2.
</div>
</body>
</html>
On other page I have:
<html>
<head>
<title>Test</title>
</script>
</head>
<body>
Section 2
</div>
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1) );
}
</script>
</body>
</html>
What I like to achieve here is, when I click on "Section 2" on the second page, main page will open with "div2" content displayed. The above code doesn't work for me.
d is missing in id
Section 2
and this script should be in page 1
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1) );
}
</script>
Hope this will help
this is complete code of your page 1 (main.html)
<html>
<head>
</head>
<body>
<a name="div1" href="javascript:;" onmousedown="toggleDiv('div1');"><p><b>Section 1</b> </p></a>
<div id="div1" style="display:none">
Content for section 1.
</div>
<a name="div2" href="javascript:;" onmousedown="toggleDiv('div2');"><p><b>Section 2</b></p></a>
<div id="div2" style="display:none">
Content for section 2.
</div>
</body>
<script type="text/javascript">
if ( location.hash.length > 1 )
{
toggleDiv( location.hash.substring(1));
}
function toggleDiv(divid){
alert(divid);
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}
</script>
</html>
You cannot call Javascript function Like that...That won't work...you need to call the function inthe onLoad Event of the Page...like
<body onload="toggleDiv('div2')">
</body>
Else
Open The Popup and Use "Window opener" property.See this link http://www.w3schools.com/jsref/prop_win_opener.asp