In implementing a search functionality, I'm returning dynamically generated html in response to an ajax request and inserting the HTML into a div. Part of the dynamic HTML is a "navigation pane" that I want to affix using bootstrap (the "#affixcontainer" div). However, the navigation pane refuses to stick.
<div class="hidden-xs col-xs-3">
<div id="affixcontainer" data-spy="affix" data-offset-top="120" data-offset-bottom="10">
<div class="panel panel-primary">
<div class="panel-heading">SEARCH RESULTS</div>
<div class="panel-body" style="padding:0;margin:0">
<nav id="scroll-nav" class="bs-docs-sidebar hidden-print hidden-xs" role="navigation">
<ul class="nav nav-pills nav-stacked bs-docs-sidenav">
<li><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>Top</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="col-xs-9">
SEARCH LISTINGS
</div>
I also tried to affix using javascript (separately, see code snipped below), but that doesn't seem to work either. The script is at the bottom of the dynamically generated HTMl. What am I doing wrong?
$(document).ready(function(){
$("#affixcontainer").affix({
offset: {
top: 120,
bottom: 20
}
});
});
I'm assuming the HTML above is the HTML that is being dynamically inserted. The .affix() function would need to be called after it is appended to the DOM. The data- attributes only work for elements available on page load. Anything inserted after that require a separate call to affix(). See
https://github.com/twbs/bootstrap/blob/v3.3.6/js/affix.js#L148 for it's implementation.
EDIT
Also, $(document).ready() does not work since AJAX calls occurs after this event. The HTML elements would not be in the DOM yet.
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I have a div container which holds several other divs and other content, which collectively, makes up my slideout sidenav menu.
I would like to call that entire div from another page. I have tried some suggested jquery methods, but so far, have had no luck.
This is a shortened version of what the section looks like...
<!--Opening div for menu container-->
<div id="menuContainer">
<div>
<div>
<span class="menu">
<a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
<p class="subMenuOpenBtn">Open ▼</p>
</a></span></div>
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
<div class="tab">
<div class="subMenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<div class="subMenuCloseBtn">
<span>Close ▲
</span>
</div>
</div><!--Closing div for menu container-->
I want to save that entire bit of code on it's own page called 'SlideOutPage' (I'm not entirely sure if tat page should be saved in an html, php, or other type page)
Then... on my index.php page, I want to create a new div or 'container', and somehow call that section of code into it.
This is possible through Javascript/jQuery, yes. Save that into a new file, then use jQuery's .load() function like so.
<div id="wrapper">
Loading, please wait...
</div>
JS:
<script>
$(function() {
$("#wrapper").load("myfile.html");
}
</script>
HOWEVER, I would suggest doing this with PHP instead. You can just include the file with a PHP include or require statement.
<?php
include "myfile.php";
?>
Difference between various methods
The best way to do it is using PHP because its a backend scripting language and wont be visible to visitor. If someone visits the webpage, it looks normal to him/her.
Through JQuery, it will be visible in source code. So, in some way visitor can know that its fetching the div from another file.
<!-- external file `menu.html`
Opening div for menu container-->
<div id="menuContainer">
<div>
<div>
<span class="menu">
<a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
<p class="subMenuOpenBtn">Open ▼</p>
</a></span></div>
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
<div class="tab">
<div class="subMenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<div class="subMenuCloseBtn">
<span>Close ▲
</span>
</div>
</div><!--Closing div for menu container-->
Through PHP
include 'menu.html'; or require 'menu.html'
<div id="wrapper">
<?php include 'menu.html'; ?>
</div>
or,
<div id="wrapper">
<?php require 'menu.html'; ?>
</div>
The file in which this code is called should be .php.
You can also use include_once 'menu.html' or require_once 'menu.html'. In this your file will be called only one time in a page. If there is another occurrence of same file, then it won't be included.
Through JQuery
<div id="wrapper"></div>
<script>
$(function() {
$("#wrapper").load("menu.html");
}
</script>
First of all, what do I mean by "fluid page"? I mean one long page that is broken into id sections which show those id's as pages. It's most basic structure looks like this:
<div class="mainnav">
<ul>
<li>PAGE 1</li>
<li>PAGE 2</li>
<li>PAGE 3</li>
<li>PAGE 4</li>
<li>PAGE 5</li>
</ul>
</div>
<div id="page1" class="container-fluid"> Page 1 content </div>
<div id="page2" class="container-fluid"> Page 2 content </div>
<div id="page3" class="container-fluid"> Page 3 content </div>
<div id="page4" class="container-fluid"> Page 4 content </div>
<div id="page5" class="container-fluid"> Page 5 content </div>
<!-- sticky footer -->
<div class="footer"></div>
So as you can see whenever the you hit the menu item for that ID, the content slides up until it reaches that Id and it displays the content as if it was a different page. Easy enough!
My problem is, I have the footer sticky and I did that so that when you click to the next page (ID) the footer is still there, EXCEPT, I don't want it to show when #page1 is selected.
I attempted to build a small JS, but my JS is less than great. Here is my attempt
<script type="text/javascript">
function hideFooter(){
$("#homeContainer").css(display:none);
}
$(document).ready(function() {
hideFooter();
});
</script>
Obviously, not working. Here is a FIDDLE that you can use.
Any ideas!?
You just need to add a handler on the .mainnav a tags and toggle as appropriate:
$(document).ready(function() {
Viewport();
$(window).bind('resize', Viewport);
$('.mainnav a').click(function(){
if (this.href.indexOf('#page1') == -1) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
});
http://jsfiddle.net/taHCv/4/
I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })
I'm creating a website to showcase an app and want to allow users to click through an iPhone mockup to view various features of the app.
I have an iPhone overlay, housed as a background-image, (.iphone) and a screen grab, also housed as a background-image, (.screen) on the page, but want users to be able to dictate what screengrab is shown by clicking specific buttons.
I'm not familiar with JQuery myself but have been told that that would be a possible solution to this. How would I achieve this? My code is...
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
Any help would be greatly appreciated.
EDIT: I've found an example of something similar. Here it is...link. Click a thumbnail and it shows on the iPhone.
I'd probably set it up as follows:
<div class="fullsize">
<div class="iphone"></div>
<div class="screen"></div>
<div>
<ul class="screenshots">
<li class="iphone" id="scr1">Screen 1</li>
<li class="screen" id="scr2">Screen 2</li>
</ul>
<script>
$('.screenshots li').click(function() {
$('.fullsize div').hasClass($(this).attr('class')).css('background-image', 'imgurl'));
});
</script>
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots">Screen 1</li>
<li class="screenshots">Screen 2</li>
</ul>
<script>
$('.screenshots a').click(function(){
switch($(this).attr('id')){
case 'src1':
$('.iphone').css('background-image','url("image1.png")');
break;
case 'src2':
$('.iphone').css('background-image','url("image2.png")');
break;
}
});
</script>
$('li').click(function(){
$('div').css("background-image", "image/url/here.ext");
)};
Semantically speaking, your markup should look like:
<div class="screenshot" id="iphone"></div>
<div class="screenshot" id="screen"></div>
<ul id="screenshot-nav">
<li>Screen 1</li>
<li>Screen 2</li>
</ul>
It's more appropriate to use actual links instead of adding a click event to an li. Besides, doing it this way allows the functionality to work even without javascript, as at the very least, the user will simply be "jumped" to the right screenshot.
With that in place, the following jQuery should work:
$('#screenshot-nav a').click(function(){
$('.screenshot').hide();
$($(this).attr('href')).show();
});
However, since you're making this for an iPhone, you should probably look into jQuery Mobile, instead, and particularly the touch event handler, instead of click.
I'd suggest a single jQuery click handler that can set the desired image background for each one:
<div class="iphone"></div>
<div class="screen"></div>
<ul>
<li class="screenshots" data-backgroundurl="url1.jpg">Screen 1</li>
<li class="screenshots" data-backgroundurl="url2.jpg">Screen 2</li>
</ul>
<script>
$('.screenshots').click(function(){
$('.screen').css('background-image', $(this).data("backgroundurl"));
});
</script>