Twitter Bootstrap manually close tabs - javascript

UPDATE WORKING NOW
Got it working now. Script snippet was wrong and was not even called somehow.
For future reference -> to close bootstrap tabs:
</script>
$("#closetab").click(function() {
$("#myTabContent").hide();
});
</script>
Close
And be careful when using center-TAGs for anchor texts. It screws with your js/jquery when pointing to IDs of content within the center TAG.
Im using Bootstrap Tabs ( http://twitter.github.com/bootstrap/javascript.html#tabs ) with a slightly changed bootstrap-tab.js to show tabs on hover:
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want to add a way to manually close those tabs. I found a code snippet somewhere that does the trick in Chrome/Mozilla/Opera but not in IE:
<script>
$('a[href="#closetab"]').on('click',function(){
$("#flyout_tab").hide();
});
</script>
and
Close
In IE when i click the close-button it sends me to the root of the directoy the site is in.
I guess it has something to do with the way IE handles empty a href's (a href=""). When i put something like a href="#" it wont work in any browser.

Try putting "closetab" in the href property like this:
Close
Since the above code doesn't work, try changing the script to:
<script>
$('#closetab').on('click',function(){
$("#flyout_tab").hide();
});
</script>

Related

add class to a component in jsf template

I'm using a template for my website but I want to add a class to <li> element when clicking it , I can do it already as i saw the result in the debug mood but when i moved to this page the class="active" which i added is removed again.
Here is my img in debug mood and the script which i use.
So how can I save the added class to this element?
<script>
$(document).ready(function () {
$("#liEmpCreate").click(function () {
console.log("rerererererer ay2 ay2 ay2 ");
$("#liEmpCreate").addClass("active");
});
});
</script>
result in debug mood before redirect to this page
Finally I found the answer :) .
As I mentioned above in the question , i wanted to add this class to an element of sidebar which refers to the pages i opened. So i have all these elements in all pages, then i put an id foreach tag and tried to use the same script in each page separately , but unfortunately it doesn't work either.
So i tried to put my script everywhere in my page but when i put it after my form and before </ui:define> i found the console.log appears in the browser console, but it doesn't work as i wished because of this code is called and then the page is rendered again. finally i used the below code and it worked correctly.
<script>
$(window).on('load', function() {
$("#liEmpCreate").addClass("active");
});
</script>
<h:outputStylesheet library="js2" name="jquery-3.2.1.min.js"/>
</ui:define>

Can't load HTML code into a div when an image button is clicked

So I am making a website for radio streams and was told I should use Jquery and AJAX to load the HTML files into a div on button click so that I wouldn't have to make the user load a completely new HTML page for each radio stream. But I am a bit lost since I am new to this language and I am not entirely sure what I am doing wrong.
Currently I have a index.html page that loads each individual div and loads all the available radio stations in an iframe linking to an HTML file. In this HTML file there are around 40 buttons that each have to link to their own radio stream. On a button press I want said stream to load into the 'radio player' div for a smooth transition.
After trying to google the problem I was told to do this with the following JavaScript code:
$(function(){
$(".538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
Since each button is also showing its own image file, I tried to add class="538 to each image source so the JavaScript knows what is targeted. Unfortunately it doesn't seem to work at all and I have no clue what to do. I tried to do this in a separate index.js file which unfortunately didn't work, so I tried to use the JavaScript code in the HTML file itself, and this didn't seem to do the trick either.
TL/DR: trying to load HTML code in a div when an image button is clicked.
Is there perhaps a tutorial for this available? I tried to search the web but couldn't find anything at all. If anyone is able to help me out with this problem I'd love you forever.
I think what's happening is that you're working with dynamic elements. More importantly you should never use numbers to start off either a class name or id.
Unless you post a bit more code it's hard to figure out exactly what you're wanting to do.
If you work with dynamic html the click event won't work, because well you need do dynamically bind the event listener.
For that you can use
$('#dynamicElement').on('click', function() {
$(this).find('#elementYouWantToLoadInto').load('/includes/about-info.html');
});
The above code works if the element is nested in the button. If it's an external element then use.
$('#dynamicElement').on('click',function() {
$('#elementYouWantToLoadInto').load('/includes/abount-info.html');
});
You mentioned that this language is a bit new to you; If you're open to a bit of refactoring:
Your main page should have 2 sections:
<div id='myButtons'>
<input type='radio' data-url='/includes/about-info.html' />
<...>
</div>
<div id='myContent'></div>
<script>
$(function() { //jquery syntax - waits for the page to load before running
$('#myButtons').on('click', 'input', function() { // jquery: any click from an input inside of myButtons will be caught)
var button = $(this),
url = button.data('url'),
content = $('#myContent');
content.load(url);
});
</script>
Jquery: http://api.jquery.com/
you can try this
$('#myButtons').on('click', 'input', function() {
$.get("about-info.html", function(data) {
$("#div3").html(data);
});
});
or
$(document).ready(function(){
$(function(){
$(".radio538").click(function(){
$("#div3").load("/includes/about-info.html");
});
});
})
$(document).ready(function(){
$('#radio1').on('click',function(){
#('#loadradiohere').load('/includes/about-info.html');
});
});
Try that code in your .js file. I am still working for a similar project man.

jQuery losing click handler after loading div

This is situation: Im making content changing of my page with .load('page.php') function. But my problem is following. When i change content like this , my .click() functions dont work anymore.
Here is my .js code:
$(document).ready(function(){
$(".menu_inner").bind('click',function(){
var product = $(this).attr('prod');
produkt="modules/"+product+".php";
})
$(".menu_list_home").click(function(){
$("#contentwrapper").load('modules/homepage.php');
})
})
It is ok with homepage bind cause div where it is refreshed is not where homebutton is. It is working when page loads. As soon as i click on home, there is nothing to do. It looks like it was unbinded. Any guess?
Martin.
I belive that dom having class menu_inner is also getting changed when you load 'contentwrapper'. Use this:
$(document).on('click', '.menu_inner', function(){
ar product = $(this).attr('prod');
produkt="modules/"+product+".php";
} );

First toggle open by default

So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default.
I've been working around the JS but no luck so far so I need your precious help to get this to work.
Thanks!
Demo
Javascript
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
});
You can do it with something like:
$('.added_class_on_second li').eq(0).children('.toggle-content').show();
Just add another distinct class to the second, or target it with:
$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();
if you don't want to change the html at all.
http://codepen.io/anon/pen/CDdlH
If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.

Script not working in IE and Chrome

I'm having a problem with this tiny script I wrote for a website I'm creating. I'm totally new to JavaScript, so forgive me if I'm missing something that might be obvious to you.
The aim of the script is to hide a div as soon as the page is loaded, and then to show it when the user clicks on an element in a dropdown menu. Here it is:
$(document).ready(function(){
$("#cdcpanel").hide();
$("#contrpanel").hide();
$("#clickme").click(function() {
$("#cdcpanel").show(200, function() {
});
$("#contrpanel").hide(200);
});
$("#clickme2").click(function() {
$("#contrpanel").show(200, function() {
});
$("#cdcpanel").hide(200);
});
$("#hideall").click(function() {
$("#cdcpanel").hide(200);
$("#contrpanel").hide(200);
});
});
As you can see, the divs cdcpanel and contrpanel are initially hidden. Clicking on the element called clickme will cause cdcpanel to be shown and contrpanel to be hidden. Clicking on the element clickme2, instead, will trigger the opposite event. The problem is that it won't work on other browsers apart from Firefox. I've tried it up on Chrome and IE and the result is that the div is initially hidden, but then nothing happens by clicking on the dropdown menu.
This script relies on JQuery. It's called at the beggining of the page using the following:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsshow.js"></script>
Any suggestion on how to make things work is welcome! Thanks in advance for your time and patience.
I don't believe that dropdown menu's option elements have click events. try change event.

Categories