I am currently trying to use AJAX to dynamically load html pages with the click of a Bootstrap dropdown, but it doesn't seem to work. Any ideas?
<ul class="dropdown-menu">
<li><a onclick = "$('#ajax').load('index.html');" href = "#">Project 1</a></li>
<li>Project 2</li>
<li>Project 3</li>
<li class="divider"></li>
</ul>
and then later I create the div for the ajax to load in.
<div class = "container">
<div class = "demo-row">
<div class = "col-xs-8" id="ajax">
</div>
Finally, the AJAX itself (on a separate file).
function loadAjax(file)
{
$(document).ready(function()
{
//Target the div with id of result
//and load the content from the specified url
//and the specified div element into it:
var fileName = new String(file);
var ending = " #ajax > *";
fileName = fileName.concat(ending);
$('#ajax').load(fileName);
});
}
Related
I want to create two tab switching independent to each other in one page. This code here only allows tab switching one at a time and the content of the other tab that is not active is hidden.
HTML:
//FIRST TAB
<ul id="tab">
<li>OPTION 1</li>
<li class="select">OPTION 2</li>
</ul>
<div class="content_wrap disnon">
<p>●●●●●111</p>
<p>●●●●●222</p>
</div>
<div class="content_wrap">
<p>●●●●●111</p>
<p>●●●●●222</p>
<p>●●●●●333</p>
</div>
//SECOND
<ul id="tab">
<li class="select">OPTION A</li>
<li>OPTION B</li>
</ul>
<div class="content_wrap">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
<p>●●●●●CCC</p>
<p>●●●●●DDD</p>
</div>
<div class="content_wrap disnon">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
</div>
JScript:
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});
There are a few things to check here first.
Both of these tabs have the same id. ID's are supposed to be unique, say tab1 and tab2.
It would be better if you could show us the css of this file.
However if my assumption is correct that
tab1 -> click -> show tab1 content AND
tab2 -> click -> show tab2 content.
The code is as follows.
// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>
<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div>
// SET NOT TO DISPLAY WHEN FIRST ACTIVE
<script>
$('.tab').on('click',function() {
// SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
var tab = $(this).data('tab');
// HIDE ALL OTHER tabContent
$('.tabContent').hide();
// SHOW ONE TAB
$('#tabContent' + tab).show();
});
This has been simplified to easily be expandable for more than one tab. Simply adding more uls & divs will easily create a tab switching layout.
I have the following list of two items I'm using to filter content.
On page load, I want the first list item to be active and show the contents of "mine".
However, the second list item is showing the results instead. In order for the contents below this list to show the "My Dashboards" properly, I must click on it. I want this functionality on page load too.
I experimented with many jQuery click events on page load but nothing seems to work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="filtering" class="clearfix nav nav-tabs">
<li class="filter-item active" data-rel="mine">My Dashboards</li>
<li class="filter-item" data-rel="allAvail">All Available Dashboards</li>
</ul>
<li class="mine allAvail">Item 1</li>
<li class="mine">Item 2</li>
<li class="mine allAvail">Item 3</li>
$(document).ready(function(){
$('.filter-item').click(function(){
// reset active class
$('.filter-item').removeClass("active");
// add active class to selected
$(this).addClass("active");
// return needed to make function work
return false;
});
$(function() {
// create an empty variable
var selectedClass = "";
// call function when item is clicked
$(".filter-item").click(function(){
// assigns class to selected item
selectedClass = $(this).attr("data-rel");
// fades out all portfolio items
$(".portfolio li").fadeOut(300);
// fades in selected category
$(".portfolio li." + selectedClass).delay(300).fadeIn(500);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I have a menu that looks like this:
I want to make it possible that when the user clicks on + the <li> element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).
The code of the current item is
<li id="addNewContext" class="menu-item-divided">+</li>
Is there a snippet of code I could use to make that field editable that could save the name entered into an array, which I can then use to repopulate the menu?
Thanks!
HTML5 allows for a ContentEditable attribute to be added to any HTML element. Assign a function to the onclick event for the list item, and make it set the ContentEditable attribute to true.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
var list = document.querySelector('ul');
var editList = document.querySelector('.edit-list');
editList.onclick = function() {
//or you can use list.setAttribute("contentEditable", true);
list.contentEditable = true;
}
<ul>
<li>list item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li><span class="edit-list">+</span>
</li>
</ul>
JSFiddle as well: http://jsfiddle.net/b8m35wwk/1/
I want to make it possible that when the user clicks on + the <li> element that it's located inside becomes like an editable input form, where a new menu item name can be created and saved (by entering the name and clicking Enter).
This sample also remove + sign on click:
$('#addNewContext')
// on click, make content editable.
.click(function() {
$(this).html("").attr('contenteditable', 'true');
})
// on hit enter,
.keyup(function(e) {
if (e.keyCode == 13) {
var val = $(this).text();
$(this)
// create a new li item
.before("<li>" + val + "</li>")
// set plus sign again
.html("+")
// make contenteditable to false, when clicked the process start again.
.attr('contenteditable', 'false');
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>not edit me</li>
<li>not edit me</li>
<li>not edit me</li>
<li>not edit me</li>
<li id="addNewContext" class="menu-item-divided">+</li>
</ul>
You can use contentEditable
let list_1_e = document.getElementById('addNewContext');
list_1_e.contentEditable = true;
I have three div elements:
<div class="hide_banner" id="1"><img src="1.png"></div>
<div class="hide_banner" id="2"><img src="2.png"></div>
<div class="hide_banner" id="3"><img src="3.png"></div>
After the page is loaded the user should see the 1st div only. Here is the JS/jQ code (this works perfectly):
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
});
The user can pick another banner by click at links on this page:
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
After click for example on the 3rd link (href="#3") the div with id="1" should hide and the div with id="3" shold be shown. I have an idea how to maintain the problem combaining with PHP, but i want to solve it with JS/jQ only, so please help! ;) Here is my JS/jQ code which doesn't work:
$(document).ready(function() {
$('.hide_banner').not('#' + 1).hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
if(id == 1) {
$(id).show(3000);
$('#2').hide(3000);
$('#3').hide(3000);
}
if(id == 2) {
$(id).show(3000);
$('#1').hide(3000);
$('#3').hide(3000);
}
if(id == 3) {
$(id).show(3000);
$('#1').hide(3000);
$('#2').hide(3000);
}
});
});
P.s.: I know that it is incorrect to start id's names with a number ;)
Really, no need for if...else logic here, nor any need to specify the first id - just use :first:
$('.hide_banner').not(':first').hide(3000);
$('a').click(function() {
var id = $(this).attr('href');
$(id).show(3000);
$('.hide_banner').not(id).hide(3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hide_banner" id="1">1</div>
<div class="hide_banner" id="2">2</div>
<div class="hide_banner" id="3">3</div>
<ul class="dropdown-menu" role="menu">
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
</ul>
You already know how to use jQuery not, so use it to exclude the selected target:
JSFiddle: http://jsfiddle.net/vk94mmv2/2/
$(document).ready(function () {
$('.hide_banner:not(:first)').hide(3000);
$('a').click(function () {
var id = $(this).attr('href');
var $show = $(id);
$show.show(3000);
$('.hide_banner').not($show).hide(3000);
});
});
Note: you can change the first selector to use the :not(:first) pseudo selectors to select all but the first banner.
On this page http://kimcolemanprojects.com/ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/
This is my html for the menu so far:
<div class="left" id="nav">
<ul id="menu">
<li id="light">
Lighting + Video
<ul style="display: none;">
<li>Django Django</li>
<li>Suntrap</li>
</ul>
</li>
<li id="photo">
Photograms
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->
As you can see I only need it to work within one list item. I need help writing the Javascript for this.
So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.
Quite Simple..
<script src="jquery.js"></script>
<div id="navigation">
<p>Menu</p>
<ul id="menu">
<li>Menu 1<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 2<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 3<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
<li>Menu 4<ul>
<li>lol</li><li>lol2</li><li>lol</li><li>lol2</li>
</ul></li>
This will be your HTML container etc, under this you will need your javascript to control that hiding and changing!! You can add some styling also if you feel artistic!
<script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';
$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();
hideMenu = function() {
$('#navigation ul#menu').hide();
$('#navigation').removeClass('open');
$('#toggle').text(showMenuText);
}
$('#toggle').click(function(event){
event.stopPropagation(); event.preventDefault();
$('#navigation ul#menu').toggle();
$('#navigation').toggleClass('open');
var toggleText = $('#toggle').text();
(toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});
$('ul#menu > li > a').click(function(event){
$this = $(this);
if( $this.hasClass('page') ) parent.location = $this.attr('href');
if( $this.hasClass('home') ) { parent.location = '/'; }
event.preventDefault(); event.stopPropagation();
if( $this.hasClass('active') ) var justclosed = true;
$('a.active').removeClass('active').next('ul').hide();
if(!justclosed) $this.addClass('active').next('ul').show();
});
</script>
This is a simple HTML Example and you can execute it how you like.