I am working on a bootstrap with node.js express project. Upon getting variables installed into the theme where the username is (as shown below), There is some sort of invisible gap in the viewing of the code.
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img id='picture2' src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span id="name" class="hidden-xs">Firstname Lastname</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img id='picture' src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p><div id="name2">Firstname Lastname</div>
<div id="companytitle"><small>Member</div>since<div id='signupdate'>Nov. 2012</small></div>
</p>
</li>
<!-- Menu Body -->
This image shows the original bootstrap before i added the multiple tags to change the text with ajax. As soon as i added the <div> tags, the visuals of the profile tab parted and started to look like the first image.
I am unsure of how exactly to get these items to align right on the page, as you can see, it almost appears that the data has some breaks in it.
Can anyone point me in the right direction to fix this?
Here is the original boostrap snipped for the profile tab
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Alexander Pierce</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
Alexander Pierce - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
Related
Issue
I am making a website in php ,and in its home page i have a video at the top and a carousel below it . But every time when it loads the carousel loads first and then top video loads . I want to apply the lazy load on carousel, which is an html division . Now how can i ensure the sequential loading of content.
CODE FOR TOP VIDEO BELOW HEADER IS :-
#extends('front.layouts.main')
#section('content')
<div class="clearfix"></div>
<!-- <script src="<?php echo url('/'); ?>/js/particles.js/particles.js"></script> -->
<div class="tp-banner-container two">
<div class="tp-banner3">
<ul>
<li data-transition="fade" data-slotamount="1" data-masterspeed="500"
data-thumb="http://placehold.it/180x110" data-delay="13000" data-
saveperformance="on"
data-title="Slide 1">
<video playsinline loop muted autoplay class="fullscreen-bg__video">
<source src="/videos/HomePage/Jet_new.mp4" type="video/mp4">
</video>
</li>
</ul>
<!-- <div class="tp-bannertimer"></div> -->
</div>
</div>
CODE FOR CAROUSEL BELOW VIDEO IS :-
<div class="containerRevolvingBig" >
<div class="carousel" >
<a target="_blank" href="/accessControlPage" loading="lazy">
<div id="image1" class="carousel__face"><span class="spanRevolving">Access Control</span></div>
</a>
<a target="_blank" href="/perimeterSurveillancePage">
<div id="image2" class="carousel__face"><span class="spanRevolving">Perimeter Surveillance</span></div>
</a>
<a target="_blank" href="/antiDronePage">
<div id="image3" class="carousel__face"><span class="spanRevolving">Anti-Drone</span></div>
</a>
<a target="_blank" href="/peopleVehicleMonitoringPage">
<div id="image4" class="carousel__face"><span class="spanRevolving">People & Vehicle Monitoring</span></div>
</a>
<div id="image5" class="carousel__face"><span class="spanRevolving">APPLICATIONS</span></div>
<a target="_blank" href="/borderSurveillancePage">
<div id="image6" class="carousel__face"><span class="spanRevolving">Border Surveillance</span></div>
</a>
<a target="_blank" href="/spaceAerialSurveillancePage">
<div id="image7" class="carousel__face"><span class="spanRevolving">Space & Aerial Surveillance</span></div>
</a>
<a target="_blank" href="/weaponSightsPage">
<div id="image8" class="carousel__face"><span class="spanRevolving">Weapon Sights</span></div>
</a>
<a target="_blank" href="/vechileMountedPage">
<div id="image9" class="carousel__face"><span class="spanRevolving">Vehicle Mounted Surveillance</span>
</div>
</a>
</div>
</div>
Now I want that, this complete CAROUSEL div should load when the top video loads completely.How should I apply lazy load in this div.
I would suggest your page to have just the video loaded and add a listener to get to know when the video is loaded (Wait until an HTML5 video loads) . Then inside the listener generate the carrousel with javascript. (https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/). Finally if you are using a carrousel plugin this will need to be call once the carrousel html has been included into the page.
Other solution but i consider is not ideal, could be set creating a view in the backend that just includes the carousel, then in the frontend, inside the same listener described above, you:
send an ajax request to get that view,
in the front-end you will need to parse the html to extract the carrousel.
Inject the carrousel html into the page.
Initialise the carrousel
Hope this is clear.
So I've been trying to figure out the best way to use both of these libraries together, but I've been having a hard time.
The best thing I've found is this CodePen (https://codepen.io/ezra_siton/pen/XNpJaX) but it seems incredibly overcomplicated and I personally haven't been able to get it to work on my own project. Especially the function;
var initPhotoSwipeFromDOM = function(gallerySelector) {
... omitted this because the function is huge. This is here because
SO doesn't allow codepen links without a code block for some dumb reason.
}
I'm also using VueJS, but I don't think that really makes a difference.
All I want to happen is say I have a carousel of 6 images (3 on each "page"). I want it so that if you click the 3rd image, in Photoswipe it also goes to the 3rd image, and if you then go to the 4th image inside the lightbox gallery, it also makes the carousel go to the next page as well in the background if that makes sense.
I ideally want to do this all in native/es6 JS and I want to avoid dependencies like JQuery.
The codepen you provided is exactly how this needs to be done and it is explained well there. The function you mentioned is actually the basic setup from the photoswipe getting started page with one modification to make the swiper index match upon closing photoswipe:
/* EXTRA CODE (NOT FROM THE CORE) - UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */
// photoswipe event: Gallery unbinds events
// (triggers before closing animation)
gallery.listen("unbindEvents", function() {
// This is index of current photoswipe slide
var getCurrentIndex = gallery.getCurrentIndex();
// Update position of the slider
mySwiper.slideTo(getCurrentIndex, false);
});
Other than that part there isn't anything there that is out of the norm for setting up swiper and photoswipe independently. Just follow the normal instructions for each script, and make sure to structure the html correctly like done in the pen because that is what allows them to function together:
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<ul class="swiper-wrapper my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<!-- Slides -->
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/602" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/602" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/AB47BC/ffffff?text=Zoom-image-2" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/AB47BC/ffffff?text=Thumbnail-image-2" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/EF5350/ffffff?text=Zoom-image-3" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/EF5350/ffffff?text=Thumbnail-image-3" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/1976D2/ffffff?text=Zoom-image-4" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/1976D2/ffffff?text=Thumbnail-image-4" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/603" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/603" itemprop="thumbnail" alt="Image description" />
</a>
</li>
</ul>
I am using a free html5 theme to build on for a website and need a bit of help with the Navbar Hover function. To view the original html5 theme go to" http://www.templatemo.com/free-website-templates/430-robotic
The theme is a onepage theme however I am converting into a multipage theme. Originally in the theme you would click a menu item and it would scroll down the page to that content but I want it to open the new page in same window for that content. The way a normal site would do so. Below is a HTML and CSS.
HMTL
<div class="templatemo_menu">
<div class="templatemo_socialmedia">
<div class="templatemo_social">
<a href="http://www.Facebook.com/GreenHouseEffectUSA">
<img src="images/facebook.png" alt="templatemo facebook">
</a>
</div>
<div class="templatemo_social">
<a href="https://twitter.com/greenhouse_usa">
<img src="images/twitter.png" alt="templatemo twitter">
</a>
</div>
<div class="templatemo_social">
<a href="#">
<img src="images/youtube.png" alt="templatemo youtube">
</a>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="top-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" wp-nav-menu="Primary" wp-nav-menu-type="bootstrap">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
DONATE
</li>
<li>
VOLUNTEER
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Try moving the classes to the div rather than the ul
I wanted to know why isn't the drop down menu working. When I click on the drop down menu it does not appear. I am using bootstrap. Please tell me why it isn't working.
<li id="megamenuID" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Categories
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<div >
<div class="row">
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-4 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
<div class="col-xs-6 col-sm-2">
<a class="thumbnail" href="#">
<img alt="150x190" src="http://placekitten.com/150/190/">
</a>
</div>
</div>
</div>
</li>
</ul>
</li>
Have you included in the header the bootstrap.js script file? The main reason why it won't work is because you either haven't included it, or you miss-typed something.
Can you show us what scripts you have included?
And also, please run the page on Mozilla (if possible), open the console and post the screenshot here. We will be able to see if there is any javascript problem.
EDIT: (based on OP first comment)
As far as I can see, you have included <script src="Scripts/jquery-1.9.1.js"></script>, but have not included the bootstrap.js file.
Include it like this: <script src="Scripts/bootstrap.js"></script> and it should be working. (of course, if the bootstrap.js is located in the Scripts folder. If it is in another folder, change the path properly.)
If this won't work again, do a screen shot from the Mozilla console only, and show us what is going on there.
EDIT 2: (based on OP first comment)
Also, remove one of these two:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
You either want to use the bootstrap.min.css which is minified and for huge css files is better to use min version so it won't create a lot of trafic, or you will use the non-minified version i.e. bootstrap.css.
Hi I have multiple sliders on my page, I am using a plugin called bxSlider. On page load I have all my class newsarticle hidden but show the first parent as you may be able to see below my sliders are split into years; year2003, year2004 etc.
I have everything on a single page, therefore a URL such as wwww.example1.com/year2004.html wouldn't work, but I know I can use the following method:
www.example1.com/index.html#2003_concorde
This jumps to that ID on the page, which is great, however as I have my other sliders hidden by default if I try to jump to the following URL:
www.example1.com/index.html#2004_firefox or www.example1.com/index.html#year_2004
This will not show the corresponding div, as well because it is hidden by default and is only unhidden when I use my range slider.
Is there a way that I can successfully navigate to a hidden element on my page? Will I have to insert some JS logic to unhide these sliders?
Can somebody perhaps give me a generic example of how this works?
Appreciate any help in advance.
UPDATE:
What I have tried so far
<script type="text/javascript">
$(document).ready(function () {
if(window.location.href.indexOf("#digitl2004")) {
// hide elements
$('.newsarticle').hide();
$('.most_popular_contents').hide();
//show elements
$('#digitl2004').fadeIn('fast');
$('.news_content_2004').fadeIn('fast');
// bg image change
var image = $('#maincontent');
image.fadeOut('fast', function () {
image.css('background-image','url(images/facebook.jpg)');
image.fadeIn('fast');
}); }
});
</script>
However this has worked to no avail! I'm no expert on JS but I envision it can work the way I have tried above, or if I can get the JS to change the slider value depending on URL inserted i.e. if digitl2004 is in the URL then the range slider value will change to 2004.
index.html
<div id="digitl2003" class="newsarticle year2003"> <!-- Start Year 2003 -->
<div class="newsyear">
<h2 class="timeline_year">2003</h2>
</div> <!-- End Div News Year -->
<ul class="bxslider">
<li>
<div class="newselement" id="2003_safari">
<h3 class="timeline_heading">Safari Browser launched</h3>
<p class="timeline_content">On January 7th 2003, at Macworld in San Francisco, Steve Jobs announces that Apple are releasing their own web browser, Safari. Subsequent releases of the browser follow with the full version 1.0 release on June 23 2003.</p>
<p class="timeline_content">Source: Wikipedia</p>
<div class="newsshareicons">
<div class="wrapper">
<img src="images/facebook_icon.png" id="2003_safari_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
<img src="images/twitter_icon.png" id="2003_safari_share_twitter" alt="Share on Twitter" title="Share on Twitter"/>
<img src="images/linkedin_icon.png" id="2003_safari_share_linkedin" alt="Share on LinkedIn" title="Share on Linekdin"/>
<img src="images/googleplus_icon.png" id="2003_safari_share_googleplus" alt="Share on Google+" title="Share on Google+"/>
</div> <!-- End Wrapper -->
</div> <!-- End News Share Icon -->
</div> <!-- End News Element -->
</li> <!-- End List -->
<li>
<div class="newselement" id="2003_concorde">
<h3 class="timeline_heading">The end of Concorde</h3>
<p class="timeline_content">Concorde ends three decades of supersonic travel when, on 26th November 2003 the last Concorde lands at its new home at Filton Airfield; the airfield where it was built.</p>
<p class="timeline_content">Source: BBC News</p>
</div>
<div class="newsshareicons">
<div class="wrapper">
<img src="images/facebook_icon.png" id="2003_concorde_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
<img src="images/twitter_icon.png" id="2003_concorde_share_twitter" alt="Share on Twitter" title="Share on Twitter"/>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<img src="images/linkedin_icon.png" id="2003_concorde_share_linkeidn" alt="Share on LinkedIn" title="Share on Linekdin"/>
<img src="images/googleplus_icon.png" id="2003_concorde_share_googleplus" alt="Share on Google+" title="Share on Google+"/>
</div> <!-- End Wrapper -->
</div> <!-- End News Share Icon -->
</li>
<li>
<div class="newselement" id="2003_genome">
<h3 class="timeline_heading">Human Genome Project completed</h3>
<p class="timeline_content">In April 2003 it is announced that the project to sequence the human genome is complete. The mapping is now close to 100% complete, with only very small gaps left which are considered too costly to fill in at this point.</p>
<p class="timeline_content">Source: BBC News</p>
</div>
<div class="newsshareicons">
<div class="wrapper">
<img src="images/facebook_icon.png" id="2003_genome_share_fb" alt="Share on Facebook" title="Share on Facebook"/>
<img src="images/twitter_icon.png" id="2003_genome_share_twitter" alt="Share on Twitter" title="Share on Twitter"/>
<img src="images/linkedin_icon.png" id="2003_genome_share_linkeidn" alt="Share on LinkedIn" title="Share on Linekdin"/>
<img src="images/googleplus_icon.png" id="2003_genome_share_googleplus" alt="Share on Google+" title="Share on Google+"/>
</div> <!-- End Wrapper -->
</div> <!-- End News Share Icon -->
</li>
</ul>
</div><!-- End Year2003 -->
Js/js.js
$('.newsarticle').hide();
$('.newsarticle:first-child').show();
You may try the following plugin to detect hash changes: https://github.com/cowboy/jquery-hashchange