I am having a little difficulty passing some client side data into a third party plug-in.
I am trying to get a plug-in option to work off a variable that is created and populated via a user clicking on the <li>'s below.
Brief:
I have some HTML that acts as the handler for the interaction.
<ul class="subpage-list" id="intro-subpage-list">
<li data-slide="1">slide 1</li>
<li data-slide="2">slide 2</li>
<li data-slide="3">slide 3</li>
<li data-slide="4">slide 4</li>
<li data-slide="5">slide 5</li>
<li data-slide="6">slide 6</li>
</ul>
When the user clicks on any of the <li>'s I have the following code:
$("#intro-subpage-list li").click(function() {
var slideID = $(this).attr('data-slide');
$("body").css('overflow','hidden');
$("#intro-overlay").fadeIn(1000,function() {
$("#intro-subpage").show();
});
});
The HTML that loads after the JS interaction is as follows:
<div id="intro-overlay" class="overlay">
<div id="overlay-close">X</div>
<div id="loading"></div>
<section id="intro-subpage">
<div class="ls-layer">
<img class="ls-bg" alt="layer1-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/1.jpg">
</div>
<div class="ls-layer">
<img class="ls-bg" alt="layer2-background" src="/<? echo ASSETS . IMAGES . BGS . LIGHTSLIDER; ?>intro/2.jpg">
</div>
</section>
</div>
The code that loads and controls the plug-in is as follows:
$(".overlay section").layerSlider({
autoStart: false,
imgPreload: true,
slideDelay: '6000'
});
There is an option for this plug-in called "firstLayer" which to me makes perfect sense to be the option that would control the slider to load the correct slide dependant on the <li> that was clicked.
I have a file called functions.php that handles the HTML and a file called jquery.php that handles the plug-in and the JS.
If I have missed anything important please request and I shall edit this post with those details.
Thanks in advance.
Dan.
As no one was able to help with this question I went ahead and tried again for the solution to which I realised that creating my own plug-in; although time consuming, was the best option as I could tailor the plug-in to work exactly how I wanted.
Thank you to all who at least looked at the question and possibly thought about it.
Related
I've created a modular web page in which each component is within it's own html/php file. Example, index.html calls up header.html, content.php, etc. The reason, so I can keep each section clean, and separate.
My header.php includes a navigational bar (which also uses CSS3 to provide drop down menu (ex, DEF):
<div id="nav">
<ul><li class="navlist"ABC</li>
<li class="navlist">DEF
<ul>
<li><li>GHI</li>
<li>JKL</li>
</ul></li>
<li class="navlist">MNO</li>
</ul>
My dilemma is that I want the 'li class' to equal 'nav_active_menu' if it is the current page being viewed.
I'm assuming that PHP can take care of this, but unsure as to how. Can anyone provide any examples, or links on how to do this?
Hopefully this makes sense.. words....
You can do that by making $activePage variable before you include the header.php page
in you abc.php file:
$activePage = "abc";
include('header.php');
and in your header.php file:
<li class="<?php if ($activePage == "abc") echo 'nav_active_menu'; ?>">ABC</li>
The same way for other pages but with a different value with $activePage variable.
This is another solution, using javascript with jquery.
Add a specific CSS class to each parent li:
<div id="nav">
<ul>
<li class="navlist abc">ABC</li>
<li class="navlist def">DEF
<ul>
<li>GHI</li>
<li>JKL</li>
</ul>
</li>
<li class="navlist mno">MNO</li>
</ul>
</div>
Then add jquery javascript to your <head> in the HTML.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Add this to your CSS:
.nav_active_menu {your css for active_item goes here}
And in each HTML page add the relevant jquery selector to activate:
<script>
$(".def a").first().addClass('nav_active_menu');
</script>
See fiddle: http://jsfiddle.net/tmfncbb7/2/ (fiddle updated with the correct class)
I've been trying to learn most of this as I go so as with previous questions I've posed some of this may seem simplistic or blatantly over my head - with that said I learn best through peer explanation/example/advice so thanks in advance.
I have used what I've learned here so far to build the basic structure of my personal website. The concept is an right aligned accordion menu that remains from page to page while the content and backgrounds in the area to the left will change based on the menu selection - fundamentally like frames or iframes used to look.
THE PROBLEM:
I have some js knowledge and I know that I can cycle some of the content out via getElementById but as these will be in a gallery I didn't want to drag my speed down by loading 54+ images in the background. I also know that I can just make the thumbnails in the sidebar link with php and just load the page entirely but as I don't want the menu to change I've been trying to figure out the best method to go about this. So far I've heard mention of PHP, JQuery and AJAX (which I know by name but is new to me). Below is an example of the code and what I want to do:
<body>
<div id="all">
<div id="live-area">
<?php include("blog.php") ?>
</div>
<div id="side-bar-area">
<div id="sidebar-header">
<h3>Title</h3>
<h1>Title</h1>
</div>
<div id="nestedAccordion">
<h2>Portfolio</h2>
<div>
<h3>Branding</h3>
<div>
<ul>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
<img src="images/thumbs/example5.jpg"/>
<img src="images/thumbs/example6.jpg"/>
<img src="images/thumbs/example7.jpg"/>
<img src="images/thumbs/example8.jpg"/>
<img src="images/thumbs/example9.jpg"/>
</li>
</ul>
</div>
<h2>Blog</h2>
<div>
<ul style="margin:0px;">
<li>entry 1</li>
<li>entry 2</li>
</ul>
</div>
<h2>About</h2>
<div>
<ul style="margin:0px;">
<li>About</li>
<li>Resume</li>
<li>Accolades</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Based on the above, what I want is that whenever any of the items in the menu such as <img src="images/thumbs/example1.jpg"/> are selected it will change the content of <?php include("blog.php") ?> without reloading the page.
Firstly, is this doable? And secondly, does anyone have advice for a novice in terms of this - either basic tutorials or a how-to for the layman?
As you added jquery to your tags, you could use AJAX to perform a server side request and load the new content and replace the existing one.
$.ajax({
url: 'http://example.org/other-page.php',
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#live-area').html(data);
});
Try this,
In html,
<div id="live-area">
<?php include("blog.php") ?>
</div>
<li class="thumbs">
<img src="images/thumbs/example1.jpg"/>
<img src="images/thumbs/example2.jpg"/>
<img src="images/thumbs/example3.jpg"/>
<img src="images/thumbs/example4.jpg"/>
</li>
In script,
<script>
$('.thumbs a').click(function(){
var page = $( this ).attr('data-page');
$.ajax({
type:'POST',
url:page,
success: function(response){
$('#live-area').html(response);
}
});
})
</script>
I'm using Bootstrap nav-tabs/dropdown menus component as my primary navigation bar but I cant figure out how to set the active menu based on an incoming URI.
There are a lot of different examples/posts on the net that use nav-tabs for hiding and displaying specific div content or working with the # symbol but I just want to read the incoming URI using PHP, the _SERVER["REQUEST_URI"] variable and set a tab active. Be it a nested location in the navigation or not is also a problem.
Here what I've been trying:
<ul class="nav nav-tabs" id="supernav">
<li class="active"><i class="icon-home" style="margin-top:4px;"></i> Page 1</li>
<li class="dropdown">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li class="divider"></li>
<li>Page 2.2</li>
<li>Page 2.3</li>
</ul>
</li>
<li class="dropdown">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li class="divider"></li>
<li class="dropdown-submenu">
Page 3.2
<ul class="dropdown-menu">
<li>Page 3.2.1</li>
<li>Page 3.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Page 4</li>
</ul>
<script>
window.onload=function (e) {
e.preventDefault();
$('#supernav a[href="<?=$_SERVER["REQUEST_URI"];?>"]').tab('show');
};
</script>
Here are a couple URI examples:
http://abc.com/page1.html
http://abc.com/page2.3.html
http://abc.com/page3.2.2.html
Can anyone point me to a good example of how to accomplish this or am I just asking too much from this component?
NOTE: I've preloaded all the bootstrap and jquery resources in my header.
I'm a little late to the party but just came across this post and I figured I'd add my extra 2 cents...
Basically, the best method I've found to set the active bootstrap's tab/pill is by using Javascript/jQuery to match the current url to the href of the active link.
So if your menu is set up as the following:
<ul class="nav nav-tabs">
<li>Page 1</li>
<li>Page 2</li>
</ul>
Your jQuery will be:
$(document).ready(function() {
$('.nav-tabs a[href="'+location.href+'"]').parents('li').addClass('active');
});
This assumes absoulte path for the link's href, but that could be easily overriden by something like:
$(document).ready(function() {
var url_parts = location.href.split('/');
var last_segment = url_parts[url_parts.length-1];
$('.nav-tabs a[href="' + last_segment + '"]').parents('li').addClass('active');
});
Hope this helps somebody in the universe! :)
Cheers!
I've solved my own problem, here is a recap of the goal and what it took to accomplish.
Goals:
I wanted to use the bootstrap nav-tabs component for my navigation
bar because I liked the look/feel of it better.
I wanted to be able to set the 'active' class by parsing the
incoming URI.
I wanted sub-navigation to work as well.
New code based on first post:
<ul class="nav nav-tabs" id="supernav">
<li id="page1"><i class="icon-home" style="margin-top:4px;"></i> Page 1</li>
<li class="dropdown" id="page2">
Page 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li id="page2_home">Home</li>
<li class="divider"></li>
<li id="page2_2">Page 2.2</li>
<li id="page2_3">Page 2.3</li>
</ul>
</li>
<li class="dropdown" id="page3">
Page 3 <b class="caret"></b>
<ul class="dropdown-menu">
<li id="page3_home">Home</li>
<li class="divider"></li>
<li class="dropdown-submenu" id="page3_2">
Page 3.2
<ul class="dropdown-menu">
<li id="page3_2_1">Page 3.2.1</li>
<li id="page3_2_2">Page 3.2.2</li>
</ul>
</li>
</ul>
</li>
<li id="page4">Page 4</li>
</ul>
Notice in the code above that there are no
class="active"
or
data-toggle="tab"
set anywhere.
Because I wanted to make my nav on a static template which is used as a header for all templates I couldn't add any dynamically generated code based on incoming URI's but it turns out not to be necessary.
I added the following Javascript code to bottom of each template a visitor calls to help tell the nav-list which items to be marked as 'active'.
I used this script at the bottom of my /page1.html
<script type="text/javascript">
window.onload=function () {
$('#page1').addClass('active');
};
</script>
To set /page3.2.2.html as the active page and all the nav lvls above it I did this
<script type="text/javascript">
window.onload=function () {
$('#page3').addClass('active');
$('#page3_2').addClass('active');
$('#page3_2_2').addClass('active');
};
</script>
Now when a user comes to my site the nav gets loaded from a static file and the rest of the page contains the dynamic JavaScript that sets what components I want set active.
I also found it necessary to make this one little modification to my custom css in order to make sure no line appeared under my 'active' tab, just a visual thing probably needed because of my font settings.
.nav-tabs > li { margin-bottom: -3px; }
I would have posted some SS's but my 'rep' isn't above 10 yet, ha ha ha. Hopefully this helps someone else, god help us all when version 3 of bootstrap comes out and we have to figure this all out again. 8^)P
Tab is set active on the client-side, not on the server. This is because, usually all the contents of each tab are actually there already in the document on page load. Clicking on a tab simple hides one tab and then shows the tab having the id which the anchor element links to.
Here's what the simplest implementation of Bootstrap's tab looks like:
<!-- tab navigation -->
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>...</li>
<li>...</li>
</ul>
<!-- tab contents are inside -->
<div class="tab-content">
<!-- content of each tab is put inside a tab-pane or tab-pill -->
<div class="tab-pane active" id="tab1">
<p>content of tab 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>content of tab 2</p>
</div>
<div class="tab-pane" id="tab2">
<p>content of tab 3</p>
</div>
</div>
That's not all, you still need to activate tabbing using JS like this:
$('ul.nav.nav-tabs > li > a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
Based on how your question is constructed, I think you should go have a better look at what each Bootstrap component stands for, and try to understand what are their appropriate use-case.
If your aim was to show a specific tab in response to a request. Simply add the 'active' class to the div element that wraps its content.
And then make it show by doing this:
$('tab-pane active').tab('show');
Note: all you have to do is add active in the right place each time.
For you case specifically, the problem is in your jQuery. Here's the correct way to write it:
$('#supernav active').tab('show');
I was facing similar problem while I had few page urls like : www.somedomain.com/pages/xyz/abc/samplepage.html
This code worked in my case like magic.
$(document).ready(function() {
var permalink_nodomain = window.location.pathname;
$('.nav-tabs a[href="' + permalink_nodomain + '"]').parents('li').addClass('active');
});
May be someone is still looking for this solution just like me :)
Using PHP to set the active isn't the ideal way as PHP is server-side code and the bootstrap is a client-side UI. I recently had a project using bootstrap and found the same issue quite annoying given how powerful bootstrap is and truly hope they fix this in the upcoming 3.0 release.
The way I fixed it was to use jquery to reference a unique id on the link tag and update the active tab value based on that.
So really all the jquery did was remove the active class and assign it to the current clicked link.
If you still want to use the URL path than I'd suggest you use javascript/jquery over PHP. Check out this article on how to do just that. http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
Hope that helps.
Using Bootstrap 4
Given (HAML)
%nav.nav.nav-pills.flex-column
%a.nav-link.active{href: '#users', 'data-toggle'=>'pill', role: 'tab'} Users
%a.nav-link{href: '#deals', 'data-toggle'=>'pill', role: 'tab'} Deals
%a.nav-link{href: '#facilitators', 'data-toggle'=>'pill', role: 'tab'} Facilitators
This is reduced to (Coffeescript)
if location.hash
$('nav.nav-pills a[href="'+location.hash+'"]').tab('show')
Doc: http://v4-alpha.getbootstrap.com/components/navs/#via-javascript
i'm trying to get some attributes for HTML tags in web page for example
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
for example i need the actual Height and width for #headerWrapper and compare it with #musicNav in my PHP program , since php is server side i can't get these attribute so i'm thinking to append javascript code to calculate these attribute and store it in json file like this code
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
then read it by php file contain my algorithm witch extract visual features from webpages.
but my problem is i need to render the webpage with appended javascript using some browser or rendering engine in PHP or java ... so dose any one have some thing like that? is my method right or there is better solution?
Incase you want to render a webpage given a url and need an api to walk through the rendered dom
Phantomjs and its api and examples will help you. Check out open render
PhantomJS is a headless WebKit with JavaScript API. It has fast and
native support for various web standards: DOM handling, CSS selector,
JSON, Canvas, and SVG.
If i understand you correctly, you need a means to control the browser from your java app.
This
seems to be relevant.
Things you may also want to account for --
Letting the app know about your browser(binary or otherwise).
Choosing from multiple available browsers on the host.
Account for cross-platform support.
Disclaimer: I'm new to web development.
Scenario: I'm making an event based calendar using CodeIgniter. It works great on a desktop/tablet sized window, and I've made a mobile version using Foundation 2.0 by Zurb. It looks great, but there's a problem I'm facing.
Problem: In the mobile version, when the calendar generates, I'm needing to hide the <ul>s (that display the events in the desktop version) in the mobile version. Then I need to be able to call the <ul>s when the day_listings (which are the date numbers on the calendar) are selected/clicked/etc.
Here is how the calendar class generates a date and its events:
<td>
<span class="day_listing">7</span>
<ul class="event_list">
<li class="event_type" id="26">Event 1</li>
<li class="event_type" id="27">Event 2</li>
<li class="event_type" id="28">Event 3</li>
<li class="event_type" id="29">Event 4</li>
<li class="event_type" id="30">Event 5</li>
</ul>
</td>
Here is the code that I am trying to work with:
{cal_cell_content}
<span class="day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content}
{cal_cell_content_today}
<span class="today_day_listing">{day}</span><ul class="event_list">{content}</ul>
{/cal_cell_content_today}
Note: This is what you need to work with.
Question: What method(s) do I need to use (e.g. CSS/JavaScript/PHP/etc.) to hide the <ul>s properly when the calendar class generates, and to call them when selected/clicked/etc. on the day_listings?
Thank you so much for all of your help! Below are the resources I'm using that you can reference if you're having trouble knowing what I'm talking about:
CodeIgniter
Foundation
(function($) {
var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (isMobile) {
$('.event_list').hide(); // setting display:none; on all .event_list <ul> elements
// attach click event to the <span class="day_listing"> elements
$('.day_listing').click(function() {
var $eventList = $(this).sibling('.event_list');
$('.event_list').hide(); // again hide all possibly shown ones before opening the selected one
$eventList.show(); // setting display:block on sibling <ul> of clicked <span>
});
}
})(jQuery);
Foundation mobile.css (there is no foundation.css that I could find) sets display:block!important with the hide-on-phones class. It's possible that the ul's are not actually hidden, but are overflowing to a part of the page that isn't visible in the default viewable area (which is why they appear when resized).
That aside, it's not clear what you want. You state that it is working early in the question, then state it's not working... As always, seeing more of your code would be helpful.
To hide the ul's properly, use js:
document.getElementById('ulID').style.display="none"
you can access its' url via
document.getElementById('ulID').href
jQuery would make some of this stuff easier; might be worth looking into.
edit:
So this is still confusing me: your ul's don't have the hide-on-phones class; is that being set by Foundation?
Also, are you trying to hide the events and have them show when the day is clicked on? e.g.
<td>
<span class="day_listing">7</span>
<ul class="event_list">
<li class="event_type" id="26">Event 1</li>
<li class="event_type" id="27">Event 2</li>
<li class="event_type" id="28">Event 3</li>
<li class="event_type" id="29">Event 4</li>
<li class="event_type" id="30">Event 5</li>
</ul>
</td>
the events are hidden by default then when you click on "7" they show? If that is indeed what you want, an example of a jQuery solution using the existing markup generated by calendar:
(as an aside, you'll probably want to use noConflict so jQuery doesn't interfere with your other libraries)
function itsMobile(){
jQuery('.event_list').hide();
jQuery('.day_listing').click(function(){
jQuery(this).next('ul').toggle();
});
}
jQuery(document).ready(function(){
if(navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)){
itsMobile();
}
})