I have followed the instructions on the jQuery site to close jQuery tabs but its not working. below is my code snippet.
<script type="text/javascript" src="js/ui.tabs.closable.min.js"></script>
var mainTab = $("#contentTab").tabs({closable: true});
$("#checkup").click(function(){
mainTab.tabs('add','checkup.php','CheckUp');
var newIndex = mainTab.tabs("length") - 1;
mainTab.tabs("select", newIndex);
});
$("#registration").click(function(){
mainTab.tabs('add','reception.php','Registration');
var newIndex = mainTab.tabs("length") - 1;
mainTab.tabs("select", newIndex);
Check out A Close Button for jQuery UI Tabs and working demo.
My Solution:
function closeTab(tabTitle) {
$('ul li[role=tab] a').each(function() {
var parent = $(this).parent();
if ($('a',parent).text() == tabTitle) {
$('span',parent).click();
}
});
}
Related
I have been trying to add the chosen jquery for my selectbox which is fetching the values from database based on another. The normal selectbox works fine and all the options are getting displayed but the chosen jquery is not working.
I won't put the script tags over here because the chosen jquery is working fine for hard coded values of host names.I have applied jquery for 'host_name' scrolling list.
This is what i tried
$( function() {
$(".host_name").chosen(); });
or:
$( function() {
$("#host_name").chosen().change(host_name); })
or:
$( function() {
$('#host_name').trigger('chosen:updated');
})
perl cgi code containing ajax for fetching data from database scrolling list:
my $JAVASCRIPT = <<'ENDJS';
function call(host)
{
//alert("in call");
var selos=document.getElementById("ostype");
var x=selos.options[selos.selectedIndex].text;
if (x){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (this.readyState == 4 && this.status == 200) {
var obj=JSON.parse(this.responseText);
var select = document.getElementById("host_name");
for (var key in obj){
var option = document.createElement('option');
option.text = option.value = obj[key];
select.add(option, 0);
//document.getElementById('host_name').appendChild(var);
}
}
};
xhttp.open("GET", "logic.cgi?ostype="+x, true);
xhttp.send();
}
}
cgi code for html
$q->start_td({-colspan=>2}),
$q->scrolling_list(-name=>'ostype',
-size=>1,
-id=>'ostype',
-values=>['RHEL','Windows','SLES'],
-onClick=>'together()',
-onChange=>'call()'
),
$q->end_td,
"Host name",$q->font({-color=>'red'},"*") ,
$q->end_td,
$q->start_td({-colspan=>2}),
$q->scrolling_list({-style=>'width:150px',
-name=>'host_name',
-class=>'host_name',
-id=>'host_name',
-size=>'3',
-values=>[],
-multiple=>'true'}
),
$( function() {
$(".host_name").chosen(); });
The $(".host_name") jQuery selector selects all elements with the class hostname (e.g. <div class="host_name"></div>).
$( function() {
$("#host_name").chosen().change(host_name); })
The $("#host_name") jQuery selector selects all elements with the id hostname (e.g. <div id="host_name"></div>)
$( function() {
$('#host_name').trigger('chosen:updated');
})
You might want to check the chosen() documentation for usage examples, too.
There's an error in your commented-out bit of JavaScript:
//document.getElementById('host_name').appendChild(var);
It should be
//document.getElementById('host_name').appendChild(option);
I'd like to hide my page's navigation when video is playing, just like the play button does.
Here's the script that succesfully hides the play button:
<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
And this script I tried to hide my navigation bar with:
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>
Here's link to my site
Try using the jQuery .toggle() function;
$('.vid').parent().click(function () {
$(".navbar").toggle();
});
You didn't close your function and if statement
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
}
}
</script>
I want to execute a JavaScript code on load of the Shadow DOM in my custom element.
I tried the following code but it did not work
x-component.html:
<template id="myTemplate">
<div>I am custom element</div>
</template>
<script>
var doc = this.document._currentScript.ownerDocument;
var XComponent = document.registerElement('x-component', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = doc.querySelector('#myTemplate');
var clone = document.importNode(template.content, true);
clone.addEventListener('load', function(e) {
alert('Shadow DOM loaded!');
});
root.appendChild(clone);
}
}
})
});
</script>
Then I use it in another html as follows -
index.html:
<!doctype html>
<html >
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="x-component.html">
</head>
<body>
<x-component></x-component>
</body>
</html>
The doc variable is used as I am using Polymer webcomponents.js polyfill and the polyfill needs it.
What is the right syntax to listen to load event of Shadow DOM?
AFAIK, the only way to achieve this is to use MutationObserver:
attachedCallback: {
value: function() {
var root = this.createShadowRoot();
var template = document.querySelector('#myTemplate');
var clone = document.importNode(template.content, true);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.addedNodes) { // this is definitely a subject to change
alert('Shadow is loaded');
};
});
})
observer.observe(root, { childList: true });
root.appendChild(clone);
}
}
I would be glad to know if there is more elegant way, but for now I use this one.
Live preview: http://plnkr.co/edit/YBh5i2iCOwqpgsUU6En8?p=preview
I am having HTML page where i ll have link as "SHOW" while clicking on that I need to show div area. where DIV has iframe.
Normally while loading HTML page that div should be in hidden state while clicking only it should be shown.
I need close button inside that link..While clicking on that I need to close the dive that is hide.
a
function toggleDisplay(id)
{
if (!document.getElementById) { return; }
var el = document.getElementById('straddle');
if (el.style.display == ''){
el.style.display = 'none';
}else {
el.style.display = '';
}
}
I don't want this toggle function
Please help me.
Your javascript
<script type="text/javascript">
<!--
var whatever = document.getElementById('mydiv');
whatever.style.display = 'none';
function show(){
whatever.style.display = 'block';
}
function hide(){
whatever.style.display = 'none';
}
//-->
</script>
and then the HTML
Click here to show element
<br/>
<div id="mydiv">
This will disappear and reappear and
Click here remove element</div>`
You may want this (Iframe may take a while to load, so let it load)
HTML:
Show
<div id="straddle">
<div id="close">Close</div>
<iframe width='100%' src="http://heera.it"></iframe>
</div>
JS: (Put it before closong </body> tag between <scripe type="text/javascript"></scripe>)
window.onload = function() {
var show = document.getElementById('show'),
el = document.getElementById('straddle'),
close = document.getElementById('close');
show.onclick = function() {
el.style.display = 'block';
return false;
};
close.onclick = function(){
el.style.display = 'none';
};
};
Update : Added relevant css
#straddle{ display:none; }
#close{
float:right;
cursor:pointer;
display:inline-block;
}
Use jQuery:
$(document).ready(function() {
$('#link1').click(function() { $('#div').css({ display:'none' }) })
$('#link2').click(function() { $('#div').css({ display:'block' }) })
})
I am having a webpage with 3 slider and one popup box. For sliders i used jQuery.noConflict() so that is working fine. but in the case of popup box if i am using jQuery.noConflict() its not working.
If i am not using jQuery.noConflict() then my slider wont work.
popup html
<div id="popupContact">
<a id="popupContactClose"><img src="close.gif" alt="close"/></a>
<div id="contactArea"></div>
</div>
<div id="backgroundPopup"></div>
popup jquery
var popupStatus = 0;
function loadPopup(){
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.2"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
function disablePopup(){
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css({
"height": windowHeight
});
}
var $rp = jQuery.noConflict();
$rp(document).ready(function(){
$rp("#buttonpop").click(function(){
centerPopup();
loadPopup();
});
$rp("#popupContactClose").click(function(){
disablePopup();
});
$rp("#backgroundPopup").click(function(){
disablePopup();
});
$rp(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
Note: This popup jquery is an external jquery and i am using <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> also.
Thank you.
If you use jQuery.noConflict(), that prevents jQuery from aliasing jQuery as $. However your popup code is still trying to use $.
Either reference jQuery, not $, or wrap your code in a closure and reference $ as a local variable within the closure, i.e.
(function($) {
//popup code here
})(jQuery);