I am trying to do page load when scrolling down. When I started searching for code I found stuff only for dynamic pages. I did not get any code for static pages.
Please help me. How to do when scrolling down at certain points in a static page, not dynamic page. My code structure is below:
<div class="row">
<div class="col-md-12">
<div class="col-md-8">
<article class="blog_post">
<h4><b>Self-driving Trucks Face Regulatory, Technical Hurdles</b></h4>
<div class="blog_category" style="font-size:14px">
<ul>
<li>Fresh releases</li>
</ul>
</div>
<div class="blog_text" style="font-size:14px">
<ul>
<li>| </li>
<li>Post By : Trucks.com</li>
<li>| </li>
<li>On : 12 Dec 2016</li>
<li>| </li>
<li>
<span class="fb-share-button" data-href="" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" href="javascript: void(0)" onclick="popup()"><img id="my-img" style="width:2%;" class="social" src="images/br4Br.png" /></a>
</span>
</li>
<li>| </li>
<li><a data-site="" class="ssba_twitter_share" onclick="popup('')" target="_blank"><img id="my-img" class="social2" src="images/t1.png" /></a></li>
</ul>
</div>
<div class="blog_post_img">
<a href="" target="_blank">
<img src="images/blog_post_img73.jpg" alt="image">
<span style="font-size:10px;">Torbjörn Holmström, senior advisor to Volvo's Research & Technology Group. (Photo: Volvo)</span>
</a>
</div>
<p>For several decades now, Torbjörn Holmström has been helping Volvo vault the technical and logistical barriers to fulfill the dream of fully autonomous long-haul trucks.</p>
Continue reading <i class="fa element" aria-hidden="true"></i>
</article>
<article class="blog_post">
<h4><b>Nikola Motors Wants to Use Tech to Fix Trucking's Millennial Problem</b></h4>
<div class="blog_category">
<ul>
<li>Fresh releases</li>
</ul>
</div>
<div class="blog_text">
<ul>
<li>| </li>
<li>Post By : Inverse</li>
<li>| </li>
<li>On : 11 Dec 2016</li>
<li>| </li>
<li>
<span class="fb-share-button" data-href="" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore" target="_blank" href="javascript: void(0)" onclick="popup('')"><img id="my-img" style="width:2%;" class="social" src="images/f1.png" /></a>
</span>
</li>
<li>| </li>
<li><a data-site="" class="ssba_twitter_share" onclick="popup('')" target="_blank"><img id="my-img" class="social2" src="images/t1.png" /></a></li>
</ul>
</div>
<div class="blog_post_img">
<a href="" target="_blank">
<img src="images/blog_post_img72.png" alt="image">
</a>
</div>
<p>Nikola Motor Company has gotten a lot of attention for its hydrogen-powered trucks. And it should: Hydrogen fuel cells make the trucks environmentally friendly, more powerful than diesel-reliant vehicles, and safer than their predecessors.</p>
Continue reading <i class="fa element" aria-hidden="true"></i>
</article>
.
.
.
.
.
.
</div>
</div>
</div>
I have so many articles and it will update daily around 8 to 10 articles. If I start scrolling down it will take so much time to reach the bottom articles. So Please help me.
Related
I use Bootstrap 4.5.0 and am trying to use this Bootstrap form-wizard (version 1.4.2).
To navigate through the different tabs, the JS should add a class="active" attribute to the current step's <li>-element. Instead - for some reason that I haven't been able to figure out - it adds the attribute to the <li>-element's child element <a>.
This results in the nav-pills not being styled right and the previous/next buttons not working properly.
I manually added/removed the required attributes using Chrome browser's developer tools and confirmed that apparently, everything would work out fine, if the class="active" attribute got attached to the <li>-element.
Any ideas why the class is added to the wrong element and how to prevent it?
Here's my HTML mark-up:
<div id="rootWizard">
<div class="form-bootstrapWizard">
<ul class="bootstrapWizard form-wizard">
<li data-target="#step1" class="active">
<a href="#tab1" data-toggle="tab">
<span class="step">1</span>
<span class="title">Title of Step 1</span>
</a>
</li>
<li data-target="#step2">
<a href="#tab2" data-toggle="tab">
<span class="step">2</span>
<span class="title">Title of Step 2</span>
</a>
</li>
<li data-target="#step3">
<a href="#tab3" data-toggle="tab">
<span class="step">3</span>
<span class="title">Title of Step 3</span>
</a>
</li>
<li data-target="#step4">
<a href="#tab4" data-toggle="tab">
<span class="step">4</span>
<span class="title">Title of Step 4</span>
</a>
</li>
<li data-target="#step5">
<a href="#tab5" data-toggle="tab">
<span class="step">5</span>
<span class="title">Title of Step 5</span>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
This is how I initialize the wizard within the document.ready()-function:
$('#rootWizard').bootstrapWizard({
tabClass: 'bootstrapWizard'
});
New appended content do not get the same design as the existing ones.
Here my full code:
HTML
<!-- Top Bar -->
<nav class="navbar">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- Notifications -->
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button">
<i class="material-icons">notifications</i>
<span class="label-count">7</span>
</a>
<ul class="dropdown-menu">
<li class="header">NOTIFICATIONS</li>
<li class="body">
<ul class="menu" id="append">
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">person_add</i>
</div>
<div class="menu-info">
<h4>12 new members joined</h4>
<p>
<i class="material-icons">access_time</i> 14 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-cyan">
<i class="material-icons">add_shopping_cart</i>
</div>
<div class="menu-info">
<h4>4 sales made</h4>
<p>
<i class="material-icons">access_time</i> 22 mins ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-red">
<i class="material-icons">delete_forever</i>
</div>
<div class="menu-info">
<h4><b>Nancy Doe</b> deleted account</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-orange">
<i class="material-icons">mode_edit</i>
</div>
<div class="menu-info">
<h4><b>Nancy</b> changed name</h4>
<p>
<i class="material-icons">access_time</i> 2 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-blue-grey">
<i class="material-icons">comment</i>
</div>
<div class="menu-info">
<h4><b>John</b> commented your post</h4>
<p>
<i class="material-icons">access_time</i> 4 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-light-green">
<i class="material-icons">cached</i>
</div>
<div class="menu-info">
<h4><b>John</b> updated status</h4>
<p>
<i class="material-icons">access_time</i> 3 hours ago
</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="icon-circle bg-purple">
<i class="material-icons">settings</i>
</div>
<div class="menu-info">
<h4>Settings updated</h4>
<p>
<i class="material-icons">access_time</i> Yesterday
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="footer">
View All Notifications
</li>
</ul>
</li>
<!-- #END# Notifications -->
</ul>
</div>
</div>
</nav>
<br/><br/> <br/><br/> <br/><br/>
Append it
JAVASCRIPT
$( document.body ).on( 'click', '.append', function( event ) {
$("#append").append(
"<li>"+
"<a href=\"javascript:void(0);\">"+
"<div class=\"icon-circle bg-purple\">"+
"<i class=\"material-icons\">settings</i>"+
"</div>"+
"<div class=\"menu-info\">"+
"<h4>Just make a small Test to see the problem</h4>"+
"<p>"+
"<i class=\"material-icons\">access_time</i> Yesterday"+
"</p>"+
"</div>"+
"</a>"+
"</li>"
);
return false;
});
A real example to test it and see my problem:
https://jsfiddle.net/Lr7gn020/1/
To reproduce my problem:
Click on Append it link
Then click on Notification dropdown menu and scroll down into the last <li> row, and you will see that the design of appended rows is not like the others.
Please help to figure it out.
You're missing a couple of classes when you append the new items. The a tag in the original items has the waves-effect and waves-block classes applied, but you're not giving it those in the newly added elements.
Try changing "<a href=\"javascript:void(0);\">" to "<a href=\"javascript:void(0);\" class=\" waves-effect waves-block\">"
Updated JSFiddle: https://jsfiddle.net/Lr7gn020/3/
I have forked your fiddle with a minor adjustment. The only thing that is preventing the styling from being the same as the others is the amount of content that is in the h4 under the menu-info div. When I deleted some of the text, leaving only "Just make a small Test" it appears like all the other list items. The text was making it so the width of the div was larger than the area given to the right of the icon which is why it was dropping down.
Your anchor tag is also missing the two classes waves-effect waves-block. If you are adding these 2 classes with JS you will need to reinitialize the function that does this after the item is appended.
UPDATE
If you need to have that much content then just simply add a max-width: 200px to your .menu-info class. Updated Fiddle
I'm currently working on a hybrid mobile app and after i changed my code for the new menu, I got some problems for iOS.
So here it's simple, on the emulator everything is fine, but on iOS, the menu is grey like the right side and when I press something on the menu, it close it directly !
I don't understand why it doesn't work because I don't have any problems on Android.
My code is simple :
<div id="menu" class="touch-menu-la">
<span class="mdl-layout-title" style="background-color: #1A237E">
<img class="logoMenu alignCenterImg" src="../img/logo.png">
</span>
<ul class="menu-items">
<li>
<a href="events.html">
<img src="../img/icons/events.png" class="imgMenuList"></img>Événements
</a>
</li>
<li>
<a href="happyHours.html">
<img src="../img/icons/happyHours.png" class="imgMenuList"></img>Happy Hours
</a>
</li>
<li>
<a href="bonsPlans.html">
<img src="../img/icons/bonPlan.png" class="imgMenuList"></img>Bons Plans
</a>
</li>
<li>
<a href="cocktails.html">
<img src="../img/icons/cocktails.png" class="imgMenuList"></img>Cocktails
</a>
</li>
<li>
<a href="games.html">
<img src="../img/icons/jeux.png" class="imgMenuList"></img>Jeux
</a>
</li>
<div class="tonight-drawer-separator"></div>
<li>
<a href="about.html">
<img src="../img/icons/info.png" class="imgMenuList"></img>À propos
</a>
</li>
</ul>
</div>
<script>
var TouchMenu = TouchMenuLA({
target: document.getElementById('menu')
});
document.getElementById('menu-open').addEventListener('click', function(){
TouchMenu.toggle();
});
</script>
Does someone got any idea ?
I'm really lost with this problem.
Thank's
I have a triple nested tab in my page. Whenever I activate a middle tag, it stays activated even when I click out of the first tab onto another tab. Here is an example in a jsfiddle.
http://jsfiddle.net/jNWMY/2/
For example:
Try clicking Acquisition then All Device then Facebook
Click Engagement tab in first row
Bottom row does not deactivate
Second example:
Try clicking Acquisition then All Device then Facebook
Click Desktop tab in second row
Bottom row does not deactivate
The first example provided by you can be solved by enclosing nav-tabs and tab-content under tabbable class. Try like this:
jsfiddle
<div id="dashboard_container" style="padding-left:50px; padding-right:50px; padding-bottom:50px; padding-top:10px;">
<h1> Dashboard </h1>
<div class="tabbable">
<ul class="nav nav-tabs" id="dashboard_tabs">
<li>
<a href="#acquisition_tab" data-toggle="tab">
<b>Acquisition</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#engagement_tab" data-toggle="tab">
Engagement
</a>
</li>
<li> <a href="#retention_tab" data-toggle="tab">
Retention
</a>
</li>
<li> <a href="#revenue_tab" data-toggle="tab">
Revenue
</a>
</li>
</ul>
<div class="tab-content">
<div id="acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="acquisition_tabs">
<li> <a href="#all_device_acquisition_tab" data-toggle="tab">
<b>All Device</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#desktop_acquisition_tab" data-toggle="tab">
<b>Desktop</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#mobile_acquisition_tab" data-toggle="tab">
<b>Mobile</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="all_device_acquisition_tab" class="tab-pane">
<div class="tabbable">
<ul class="nav nav-tabs" id="all_device_acquisition_tabs">
<li> <a href="#ad_all_acquisition_tab" data-toggle="tab">
<b>All</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_gamefuse_acquisition_tab" data-toggle="tab">
<b>Gamefuse</b>
<span style="color:red">(-30%)</span>
<br/>
Total Installs
</a>
</li>
<li> <a href="#ad_facebook_acquisition_tab" data-toggle="tab">
<b>Facebook</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_kongregate_acquisition_tab" data-toggle="tab">
<b>Kongregate</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
<li> <a href="#ad_yahoo_acquisition_tab" data-toggle="tab">
<b>Yahoo</b>
<span style="color:red">(-30%)</span>
<br/> Total Installs
</a>
</li>
</ul>
<div class="tab-content">
<div id="ad_all_acquisition_tab" class="tab-pane">
<p>all device ALL Acquisition</p>
</div>
<div id="ad_gamefuse_acquisition_tab" class="tab-pane">
<p>all device GAMEFUSE Acquisition</p>
</div>
<div id="ad_facebook_acquisition_tab" class="tab-pane">
<p>all device facebook Acquisition</p>
</div>
<div id="ad_kongregate_acquisition_tab" class="tab-pane">
<p>all device kongregate Acquisition</p>
</div>
<div id="ad_yahoo_acquisition_tab" class="tab-pane">
<p>all device yahoo Acquisition</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="engagement_tab" class="tab-pane">
<p>Engagement tab</p>
</div>
<div id="retention_tab" class="tab-pane">
<p>Retention tab</p>
</div>
<div id="revenue_tab" class="tab-pane">
<p>Revenue tab</p>
</div>
</div>
</div>
</div>
And for the second mentioned problem you haven't provided tab-content for desktop and mobile tabs
I have tried to allign my dropdown to the right part of navbar but failed, I have tried a lot of way to do it, in all ways I have failed.
If there is any way to fix this someone help me please, thanks in advance.
<?php
$curdir = getcwd ();
chdir('/forum');
require_once('/global.php');
chdir ($curdir);
$username=$vbulletin->userinfo['username'];
?>
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/index.php"></p>Name</p></a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
Home</b>
</li>
<li>
Forum
</li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'><img src="P.png"> Players<b class='caret'></b>
</a>
<ul class="dropdown-menu">
<li>
<img src="/action.php"> Action
</li>
</ul>
</li>
<?php if ($vbulletin->userinfo['usergroupid'] == '1' )
echo "
<li class='dropdown'>
<a href='#' class='dropdown-toggle' data-toggle='dropdown'><i class='icon-user icon-white'></i> Welcome Guest<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'><img src='/img/connectserver.png'> Action</a>
</li>
<li>
<a href='/login.php'><i class='icon-ban-circle'></i> Login</a>
</li>
<li>
<a href='register.php'><i class='icon-ok'></i> Register</a>
</li>
</li>
</ul>
</ul>
</li>";?>
<?if ($vbulletin->userinfo['usergroupid'] != '1' )
echo "
</li>
<li class='dropdown'>
<a href='#' class='dropdown-toggle class='nav pull-right' data-toggle='dropdown'><img src='/img/connectserver.png'></i> Welcome <font color='red'>$username</font><b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
<a href='#'><img src='/img/connect.png' height='19' width='19'> Connect to server</a>
</li>
<!-- <li>
<a href='#'><img src='/log-out.png' height='19' width='19'> Log out</a>
</li> -->
</li>
</ul>
</li></p>";?>
</ul>
</div>
</div>
</div>
</div>
</div>
The html looks invalid. I cannot see all your code but it seems you have a closing li tag after your closing ul tag inside a p tag? li's can only be inside ul or ol tags. Make sure the html is correct and the try again! Hope this helps!