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
Related
I'am trying to look my Uikit slider like this for about 4 hours now...
Can someone help me with it? I ran out of ideas
Here is my code:
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
<ul class="uk-slider-items uk-child-width-1-3">
<li>
<img src="images/img1.jpg" alt="">
</li>
<li>
<img src="images/img2.jpg" alt="">
</li>
<li>
<img src="images/img3.jpg" alt="">
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
p.s. I can't use jquery
If still relevant
li.uk-active:nth-child(2) {}
.uk-slider-items li:nth-of-type(2) {}
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'
});
I have integrated "animsition.js" to my website, it work fine but some link don't work in "fade out" effect. I post my code:
<nav>
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right text-left" id="side-menu">
<!-- LOGO -->
<a class="animsition-link" href="../../index.html"><img src="../../assets/images/logo/logo_white2.png" alt="logo"></a>
<i class="icon ion-ios-close-empty icon-close menu-close-btn text-white"></i>
<div class="top">
<div class="tr">LANGUAGE_</div>
<div><a class="animsition-link" href="#"><span class="uns lang">ITALIANO</span></a> <br>
<a class="animsition-link" href="#"><span class="current lang">ENGLISH</span></a></div>
</div>
<ul class="nav navbar-nav container animsition">
<div class="tr">MENU_</div>
<li><a class="animsition-link" href="../../index.html">HOME</a></li>
<li class="dropdown">
<a class="expander" href="#">
<span class="current">PROJECTS LIST</span></a>
<div class="content">
<ul role="menu">
<li>
<a href="#">
<span class="rec4">CapozziPaints</span>
</a>
</li>
</ul>
</div>
</li>
<li>ABOUT</li>
<li>COOKIE POLICY</li>
<ul class="nav navbar-nav">
<div class="tr">CONTACT ME_</div>
<li><span class="rec3">info#josedesign.it</span></li>
<li><span class="text-white">+39 389.582.3119</span></li>
</ul>
</ul>
<!-- End navbar-nav -->
<p class="copyright grey">2017 JoseDesign.it<br>Proudly designed by Jose.</p>
</div>
</nav>
After my tag, I have inserted " ", but some link like "Home", don't make the fade out effect.
The other question is I have to insert a "fadeIn" effect to the "img" tag that I have in this code:
$(window).scroll(function() {
$.each($('img'), function() {
if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
var source = $(this).data('src');
$(this).attr('src', source);
$(this).removeAttr('data-src');
}
})
})
I try several way, the scrolling effect + show image work fine, but the fadeIn effect don't work.
Could someone help me? Thanks.
solved....
Simply I have change the animsition.js ver. 4.0.2 with vers. 3.4.3....done!
Everything work fine, all the link work fine.
The jquery script (for fadeIn image effect) doesn't work yet...
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.
Here's the fiddle
I am trying to achieve something very simple when a listed item is clicked a new class has to be added to it, there are two identical menus, change of class needs to happen in both the menus even if the click occurs in single menu.
In the fiddle #e8e8e8 color is added to any listed item with class 'zm-active', currently it's on home and works for single menu, I want it to work on both the menus even if click happens on single menu.
Code:
JS:
$(document).ready(function() {
$('.zetta-menu li').on('click', changeClass);
});
function changeClass() {
$('.zetta-menu li').removeClass('zm-active');
$(this).addClass('zm-active');
}
HTML:
<nav id="fixedbar">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</nav><!-- /#fixedbar -->
<nav class="navbar navbar-single-1 center" role="navigation">
<div class="navbar-inner center">
<ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
<li class="zm-active zm-content-full">
<a href="#header-single-1">
Home
</a>
</li>
<li>
<a href="#about-10">
About
</a>
</li>
<li>
<a href="#services-18">
Services
</a>
</li>
<li>
<a href="#portfolio-19">
Portfolio
</a>
</li>
<li>
<a href="#team-19">
Team
</a>
</li>
<li>
<a href="#pricing-17">
Pricing
</a>
</li>
<li>
<a href="#blog-19">
Blog
</a>
</li>
<li>
<a href="#contact-1">
Contact
</a>
</li>
</ul><!-- /.zetta-menu -->
</div><!-- /.navbar-inner -->
</nav><!-- /.navbar-single-1 -->
I am not very through in javascript/jquery, any help would be appreciated.
Is there something the links have in common? Of yourse! The href attribute (at least in your example).
So, you grab the href attribute of the link you clicked, by this attribute value you grab all links having the same href, and then you grab their parents (LI) in order to add class to them.
$(document).ready(function() {
$('.zetta-menu li a').click(function () {
var itemsToChange = $('li a[href="'+$(this).attr('href')+'"]').parent(),
allItems = $('.zetta-menu li');
allItems.removeClass('zm-active');
itemsToChange.addClass('zm-active');
});
});
JS Fiddle demo