I would like to use the url address bar(IE7 nad 8), for simulating a tab click.
Some parts of the html section for the webpage as follows. for the tabscroller, debugTabs-tabScroller, when the page opens, always the tab "Main" is selected. I would like to use the address url bar, using a js code so that "Debug Probe", tab is clicked. I tried the below(after the page is loaded) but doesnt seem to work.
javascript:document.getElementById('debugTabs-Probe-tab').click()
part of the html section.
var debugTabs = new dptabs.TabSet(
"debugTabs",
["Main","Probe","Conformance"],
[]
);
.
....
...
<div id="genericDetailTabs" class="genericDetailTabs">
<div id="debugTabs-tabSet" class="tabSet">
<div id="debugTabs-tabScrollLeftArrow" class="tabScrollLeftArrow" onmouseover="debugTabs.startScroll(1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
<div id="debugTabs-tabScroller" class="tabScroller">
<div class="tab" id="debugTabs-Main-tab" onclick="debugTabs.clickTab('Main');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Main</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Probe-tab" onclick="debugTabs.clickTab('Probe');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Debug Probe</span>
</span>
</span>
</div>
<div class="tab" id="debugTabs-Conformance-tab" onclick="debugTabs.clickTab('Conformance');">
<span class="tab-wrap-1">
<span class="tab-wrap-2">
<span class="tab-wrap-3">Conformance Validation</span>
</span>
</span>
</div>
</div>
<div id="debugTabs-tabScrollRightArrow" class="tabScrollRightArrow" onmouseover="debugTabs.startScroll(-1);" onmouseout="debugTabs.stopScroll()" onmousedown="debugTabs.setScrollSpeed(2);" onmouseup="debugTabs.setScrollSpeed()">
</div>
</div>
</div>
Related
Writing an angular app in bulma, copied the template directly from the template site for testing and I get this error. I have checked and checked and everything is closed properly, yet somehow I keep getting an unclosed nav error. Oddly enough when I delete the closing nav tag, the site compiles correctly, but is broken. I have no idea what to do.
Code
<section class="hero is-info is-fullheight">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="http://bulma.io/images/bulma-type-white.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>Home</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-superpowers"></i>
</span>
<span>Examples</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="#">
<span class="icon">
<i class="fa fa-book"></i>
</span>
<span>Documentation</span>
</a>
</span>
<span class="navbar-item">
<a class="button is-white is-outlined" href="https://github.com/dansup/bulma-templates/blob/master/templates/landing.html">
<span class="icon">
<i class="fa fa-github"></i>
</span>
<span>View Source</span>
</a>
</span>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-6 is-offset-3">
<h1 class="title">
Coming Soon
</h1>
<h2 class="subtitle">
$this is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.
</h2>
<div class="box">
<div class="field is-grouped">
<p class="control is-expanded">
<input class="input" type="text" placeholder="Enter your email">
</p>
<p class="control">
<a class="button is-info">
Notify Me
</a>
</p>
</div>
</div>
</div>
</div>
</div>
Error
`compiler.js:486 Uncaught Error: Template parse errors:
Unexpected closing tag "nav". It may happen when the tag has already
been closed by another tag. For more info see
https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-
implied-end-tags ("
</div>
</div>
[ERROR ->]</nav>
</div>`
in my case I was forgetting a detail in the tag
<button class="btn btn-primary" (click) "handleClickMe()
">Click me !</button>
I forgot to put the "=" in (click)="handleClickMe()
Usually if you see an "Unexpected closing tag <something>" the problem isn't actually with that <something> but rather with an adjacent element that hasn't been properly closed. Paste stuff here: https://validator.w3.org or any similar HTML validator service, or use a better editor/IDE that offers syntax highlighting to help you find these errors.
You are missing a closing </div> tag.
You close navbar-brand, navbar-menu and navbar-end but you do not close <div class='container'>
As this missing </div> tag ought to be directly before </nav>, you get the error telling you, in fact, exactly where you ought to look. "I found a </nav> I wasn't expecting to see!" ... Ok, so go look at wherever you have a </nav> and figure out what element nearby is missing or has typos, etc.
Adding for future reference, for Angular
I've also seen this where you have invalid html like this
<p>
<div>
</div>
</p>
Change the p to a div and it'll work
I try to put in place a system popup, why I decided to use the data attribute.
I wish that when an element has the id "popup" I recovered using the jQuery data-item value.
The data-item value has the id to display in my popup, my problem is that if I have several id popup, recovered came only 1 single id, the first in this page.
How can I do to retrieve all the popup and display ID is the corresponding value with the data-item?
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$("#popup").click(function() {
a = $("#popup").data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>
ID must be unique.
You should use class for this, this is the correct way:
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
And then...
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
Hope it helps.
The is is because cannot have multiple elements with the same id attribute in the same document - it's invalid HTML. You should use classes instead. From there you can use the this keyword in the click handler to reference the element which raised the event and read the data attribute. Try this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxpop">
<div class="centered">
<span></span>
<div class="close-btn"></div>
</div>
</div>
<div id="login" style="display:none;">
Test div
</div>
<header>
<div id="MainHeader">
<div class="logo"></div>
<nav id="Menu">
<li>
<span class="icon"></span>
<span class="text">Click me!</span>
</li>
<li>
<span class="icon icone card"></span>
<span class="text">Shop info</span>
</li>
</nav>
</div>
</header>
<script type="text/javascript">
$(".popup").click(function() {
a = $(this).data("item");
alert(a);
});
function demo(div) {
$("#boxpop").fadeIn(500);
$("#boxpop .centered span").empty();
$(div).insertAfter("#boxpop .centered span").fadeIn(100);
}
</script>
Given script find text from .label (text1 or any text), then it add class class="text1" to parent list <li> like this: <li class="text1">
Jquery:
$('.label a').each(function() {
$(this).closest('li').addClass($(this).text());
});
HTML:
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul>
<li> <!--List 1-->
<span class="meta">
<div class="label">
text1 <!--This text-->
</div>
</span>
</li>
<li> <!--List 2-->
<span class="meta">
<div class="label">
text2 <!--This text-->
</div>
</span>
</li>
</ul>
</div>
By this Script we get Result:
<ul>
<li class="text1"> <!--Got New class to List 1-->
<span class="meta">
<div class="label">
text1
</div>
</span>
</li>
<li class="text2"> <!--Got New class List 2-->
<span class="meta">
<div class="label">
text2
</div>
</span>
</li>
</ul>
Please See Example Fiddle >
Now following my question i'm trying to replace Class and Text to Buttons, there have two buttons like <button class="one"></button> and <button class="two"></button>, now want to place class/text .text1 (or any class) inside button,
like: <button class="one text1">text1</li></button> and <button class="two text2">text2</li></button> by same jquery given above.
I have tried this Replace text script, but i'm unable to do that. Any suggestion for other way to do this?
Thanks in advance.
Not sure exactly what you are going for but you could try something like this.
<html>
<body>
<div id="main-id">
<button class="one"></button>
<button class="two"></button>
<ul id="main-list">
<li>
<span class="meta">
<div class="label">
text1
</div>
</span>
</li>
<li>
<span class="meta">
<div class="label">
text2
</div>
</span>
</li>
</ul>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
var btns = ['.one', '.two'];
$('#main-list li').each(function(k,el){
// use clone if you don't want to remove original dom element
var $li = $(el).clone();
var className = $li.find('a').text();
$li.addClass(className)
.empty()
.text(className);
var $btn = $(btns[k]);
$btn.append($li);
});
});
</script>
</body>
</html>
I'm trying to put a <span> in an other <span> in the title of JQuery's modal but it doesn't work.
Here's my HTML code :
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
And I want to put a <span class="glyphicon glyphicon-info-sign"></span> inside the ui-dialog-title <span>.
I tried to do it like this :
$(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
And it works !
<div class="ui-dialog-titlebar...">
<span class="ui-dialog-title">
<span class="glyphicon glyphicon-info-sign"></span>Info title
</span>
...
</div>
<div id="1">
But, I will have multiple <span> with the class ui-dialog-title in my document and I want to access this <span> using the id of the next <div>.
I tried this :
$("#"+myId).prev("div").first("span").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
But the glyphicon <span> was placed BEFORE ui-dialog-title <span> :
<div class="ui-dialog-titlebar...">
<span class="glyphicon glyphicon-info-sign"></span>
<span class="ui-dialog-title">Info title</span>
...
</div>
<div id="1">
I don't understand why it is placed here because with the other method, it works.
I hope you will understand my problem and thank you for your help !
You can do:
$("#"+myId).prev("div").find(".ui-dialog-title").prepend('<span class="glyphicon glyphicon-info-sign"></span>');
Working example
Structure:
<div class="ui-dialog-titlebar">
<span class="ui-dialog-title"><span class="glyphicon glyphicon-info-sign"></span>Info title</span>
</div>
I am working on a page where i need to play youtube video in same page and when user click on any listed videos it should copy title & date to the active video area.
In my case it copies the content & changes the video but it removed the active link when i click on the video list.
Try to click on links, it will remove them one by one & video wont also show
My CODE on jsFiddle
HTML
<div style="float:left; width=800px;" id="video_container">
<div class="active-iframe">
<iframe width="438" height="250" src="http://www.youtube.com/embed/vOnCRWUsSGA?wmode=transparent&rel=0&theme=light&color=white&autoplay=0" frameborder="0" allowfullscreen="1"></iframe>
</div>
</div>
<span class="active-video-title">Title</span>
<span class="active-video-date">Date</span>
<div class="row">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 1</span>
<div class="title-wrapper">
<span class="title">Title of the Video 1</span>
<span class="date">Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">Thumnnail 2</span>
<div class="title-wrapper">
<span class="title">Title of the Video 2</span>
<span class="date">Date 2</span>
</div>
</a>
</div>
<div class="row2">
<br> <a href="oDAw7vW7H0c" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 1</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 1</span>
<span class="featured-date">featured Date 1</span>
</div>
</a>
<br> <a href="5F-Wge37_ys" class="play-youtube">
<span class="youtube-thumbnail">featured Thumnnail 2</span>
<div class="title-wrapper-control">
<span class="featured-title">featured Title of the Video 2</span>
<span class="featured-date">featured Date 2</span>
</div>
</a>
</div>
Change this
$(".active-iframe").html($(this).html(htm));
to
$(".active-iframe").html(htm);
Check it out: http://jsfiddle.net/KSMZ9/40/
This is because of the line
$(".active-iframe").html($(this).html(htm));
that replaces the HTML of your link, not the source of the iframe. Instead :
$('iframe').attr('src', 'http://www.youtube.com/embed/' + URL);
and skip var htm = ..
Demo / forked fiddle http://jsfiddle.net/5RnAe/