This works in FF but not I.E. The mouseover on the a tag won't activate. I want to be able to set the class for the a tag when user mouse over it.
<div class="selects-options" id="dropsort"
onmouseover="divshowsort();"
style="position: absolute; top: 8px; left: 1px; width: 153px;display:none;"
onmouseout="hidesort();">
<div class="drop-holder">
<div class="drop-list">
<ul>
<li class="items_selected" id="li1" rel="0">
<a onmouseover="sortclass('li1');"
onclick="divhidesort('R');" href="#">
<span>Relevance</span>
</a>
</li>
<li class="" id="li2" rel="1">
<a onmouseover="sortclass('li2');"
onclick="divhidesort('A');" href="#">
<span>Title A-Z</span>
</a>
</li>
<li class="" id="li3" rel="2">
<a onmouseover="sortclass('li3');"
onclick="divhidesort('D');" href="#">
<span>Newest</span>
</a>
</li>
</ul>
</div>
</div>
</div>
Related
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="bags" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More <i class="fas fa-angle-down ml-3"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
here is the code for dropdown
.dropdown-toggle::after {
display: none;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
pointer-events: none;
}
this is the css for displaying dropdown on hover
clicking on the link doesnt navigate to the page...
i am using express as the backend n typing the link in the navbar works but not clicking the link..
i tried adding data-target but also doesnt seems to work..
i treid setting pointer-event to auto but tat also doesnt deems to work..
Try using data-hover="dropdown" aria-haspopup="true" aria-expanded="false"
<li class="nav-item dropdown" style="cursor:pointer">
<a class="nav-link dropdown-toggle" id="navbarDropdown3" data-hover="dropdown" aria-haspopup="true" aria-expanded="false" href="services.html">SERVICES</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
This link might be a help.
Bootstrap Dropdown Hover
Wrap the dropdown's trigger and the dropdown menu within .dropdown as it is important. Add data-hover="dropdown" to the main action button or link to activate hover event.
Keypoint is to add data-hover="dropdown"
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="dropdown">
One more dropdown
<ul class="dropdown-menu">
...
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Hello I am trying to layout my navigation bar with Bootstrap 4 but some reason no matter it is not calling it out. It works in my Google developer inspector but when I insert the same code in my text editor nothing happens. Can someone help me understand what I am doing wrong?
HTML code:
<body>
<!--TOP Navigation -->
<nav class="navbar navbar-default navbar-toggleable-md ">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleContainer" aria-controls="navbarsExampleContainer" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Delvin McCray
<!-- Right Side of Navbar w/ Dropdown Fatures-->
<ul class="nav navbar-nav">
<li class="dropdown">Women <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li class="dropdown">Men <span class="caret"></span>
<!--Dropdown Menu-->
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Dresses</li>
<li>Shoes</li>
<li>Accessories</li>
</ul><!--end of dropdown menu-->
</li>
<li>Off the Rack</li>
<li>Fall 2017</li>
</ul><!--End of navbar-right-->
</div>
<!-- Right side Navbar -->
<div class="collapse navbar-collapse justify-content-end"
id="navbarCollapse">
<ul class="navbar-nav">
<li><a class="nav-link" href="#">My Account <i class="fa fa-sign-in" aria-
hidden="true"></i> </a></li>
<li><a class="nav-link" href="#">Shopping Cart <i class="fa fa-shopping-bag"
aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>
</body>
<div class="jumbotron">
<div class="col-sm-8 mx-auto">
<h1>Navbar examples</h1>
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the top and fixed top examples.</p>
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
<p>
<a class="btn btn-primary" href="../../components/navbar/" role="button">View navbar docs ยป</a>
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
CSS styling:
body {
padding-top: 50px;
}
.dropdown, .dropup {
position: relative;
margin-right: 20px;
}
.nav li {
margin-right: 40px;
}
ul.nav.navbar-nav li {
margin-right: 40px;
}
I am working with ASP.net MVC 5, I have created a bootstrap carousel/slideshow with 4 images, I want to get the id of the active slide on this carousel. Then, when an user is clicking on an submit button, I can redirect him to another page recording the active slide id in the URL.
<form method="post">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0" class=""></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<a class="carousel-buttonleft" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-buttonright" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<div class="carousel-inner" role="listbox" style="height:300px">
<div class="item active" align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>NORMAL SKIN</p>
</div>
</a>
</div>
<div class="item ">
<div align="center" class="carousel-image">
<img src="../images/saumon.png" alt="saumon1" />
</div>
<div class="carousel-caption">
<p>SILVER SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>DEEP SKIN</p>
</div>
</div>
<div class="item " align="center">
<div align="center" class="carousel-image"><img src="../images/saumon.png" alt="saumon1" /></div>
<div class="carousel-caption">
<p>WITH SKIN</p>
</div>
</div>
</div>
</div>
Thanks.
sorry i'm currently using my phone. You must select by className.
In css :
.carousel-inner .item .active
In jQuery :
$('.carousel-inner .item .active')
then... .attr('id') and for the value .val() or .text()
In C#, I found this topic to show you how to iterate inside your page controls depending a specific className target :
StackOverflow
how to make the toolbar remains at the bottom, do not go up on top after the keyboard appears ??
what's wrong with my code or less some plugins for cordova or framework7! maybe someone can help me to solve this problem.
<div class="views">
<div class="view">
<div class="pages">
<div data-page="viewprofil" class="page navbar-fixed toolbar-fixed">
<div class="navbar" style="background-color: #1abc9c;box-shadow: 0 5px 10px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);">
<div class="navbar-inner" >
<div id="kembali" class="left sliding button">
<i class="icon icon-back"></i>
</div>
<div class="left sliding">Akun</div>
</div>
</div>
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a id="kembali">
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
</a>
<a href="{{pathFor 'history'}}" >
<i class="fa fa-clock-o fa-2x"></i>
</a>
<a href="{{pathFor 'viewprofil'}}" class="toolbar-aktif">
<i class="fa fa-user fa-2x"></i>
</a>
</div>
</div>
<div class="page-content" style="background-color: #ecf0f1;color: #444444;">
<div class="content-block-title" style="top: 0px; margin-top:0px;"><h2>Pengaturan Akun</h2></div>
<div class="list-block">
<ul class="box-data">
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input id="namalengkap" type="text" placeholder="Nama lengkap" value="{{nama}}">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" value="{{email}}" disabled>
</div>
</div>
</div>
</li>
<li>
<li class="accordion-item">
<a class="item-content item-link">
<div class="item-media"><i class="icon material-icons" aria-hidden="true">lock</i></div>
<div class="item-inner">
<div class="item-title">Kata Sandi</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Kata Sandi baru">
</div>
<div class="content-block" style="margin-left: 80px;">
<input type="password" placeholder="Ulangi Kata Sandi">
</div>
</div>
</li>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon material-icons">call</i></div>
<div class="item-inner">
<div class="item-input">
<input type="tel" placeholder="No. Handphone" value="{{notelp}}">
</div>
</div>
</div>
</li>
</ul>
<div class="content-block">
<div class="logButton button button-fill button-raised color-red" id="logout" ><i class="fa fa-power-off " aria-hidden="true"></i> Keluar</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
After
Before
I never came out of an idea to keep it in the bottom, but here is a quick fix:
var myApp = new Framework7({
material: true
});
var mainView = myApp.addView('.view-main', {
});
$$ = Dom7;
$$('#my-input').on('focus', function() {
mainView.hideToolbar();
});
$$('#my-input').on('blur', function() {
mainView.showToolbar();
});
Simply show and hide the toolbar on input focus and blur events.
Live Example: https://jsfiddle.net/wowq3n64/
I have this kind of div:
<div id="page-1"></div>
<div id="page-2"></div>
<div id="page-3"></div>
<div id="page-4"></div>
<div id="page-5"></div>
<div id="page-6"></div>
And I want to use or to display or hide these s.
for example,
<a href="#" rel="page-1" class="active">1<a>
<a href="#" rel="page-2">2<a>
<a href="#" rel="page-3">3<a>
<a href="#" rel="page-4">4<a>
<a href="#" rel="page-5">5<a>
<a href="#" rel="page-6">6<a>
when page-1 is active, display none of all the div, except <div id="page-1"></div>
Can anyone give me some idea?
In JS you can do it this way:
<style>
div {display: none}
div.active {display: block;}
</style>
<div id="page-1" class="active">p1</div>
<div id="page-2">p2</div>
<div id="page-3">p3</div>
<div id="page-4">p4</div>
<div id="page-5">p5</div>
<div id="page-6">p6</div>
<a href="#" rel="page-1" class="active">1<a>
<a href="#" rel="page-2">2<a>
<a href="#" rel="page-3">3<a>
<a href="#" rel="page-4">4<a>
<a href="#" rel="page-5">5<a>
<a href="#" rel="page-6">6<a>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script>
$('a').click(function() {
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).addClass('active');
return false;
});
</script>
https://jsfiddle.net/uo3vj66s/