I'm using the Smooth-Scroll plugin from the following git - link.
It works great in places like navbar where I used it as follows:
<nav class="navbar">
<ul>
<li>Home</li>
<li>Skills</li>
<li>Service</li>
<li>end</li>
</ul>
</nav>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
However, on the same screen, I have a search button inside a form and I had liked it to act as the navbar - I want that once the user clicks on the search button it will smooth-scroll to the next section.
My form looks like this and I tried the following:
<form method="POST" class="hiscore_query">
<input type="text" placeholder="username" id="username" autocomplete="off">
<button type="submit" href="#skills"><i class="fa fa-search"></i></button>
</form>
and I tried to change my js into:
<script>
var scroll = new SmoothScroll('button[href*="#"]');
</script>
but nothing happens.
Is there any way to make that search button do that smooth scroll?
Thank you
<button>s can't be used as links. Change <button type="submit" href="#skills"><i class="fa fa-search"></i></button> to <i class="fa fa-search"></i>.
Related
I'm using Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0.
I'm trying to create a dropdown Login Page.
<ul class="nav navbar-right">
<li class="dropdown" dropdown>
<a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
<img src="assets/images/login_logo.png" alt="" class="img-responsive">
</a>
<!-- Dropdown Form -->
<ul *dropdownMenu class="dropdown-menu" role="menu">
<form class="form-group" action="index.html" method="post">
<input class="form-control form-control-sm" type="text" placeholder="Enter your name">
<input class="form-control form-control-lg" type="text" placeholder="Enter your name">
</form>
</ul>
The dropdown is working fine, but the problem is that when we click on the content of drop down( i.e input field in this case), the dropdown gets disappear. This is because when we click on it, a call is send back to the bootstrap to close it, and it is the expected behaviour. To prevent the call going back, we have to use jQuery function:
$('.dropdown-menu input').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
However, i don't want to use jQuery with Angular. Is there any other solution available?
Try this:
<input ... onclick="(event||window.event).stopPropagation()">
(event||window.event) is for IE compatibility-- in IE, event will be undefined so window.event is used instead instead. If you need it to work on IE8 or earlier, you'll want to add something to use cancelBubble if stopPropagation isn't available.
See How to stop event propagation with inline onclick attribute? for related details
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
I am using velocity scripting for a web page.I have a hidden field that I am populating with value entered with the value entered in another field ( JS fiddle: http://jsfiddle.net/x1bdgvyt/). when I try to implement the javascript with my existing code base the submit button doesn not function anymore. IIt works fine before I plug in the JS. Clicking on it doesnt do anything. I am not sure what is wrong. Any help is much appreciated.
HTML submit button code
<div>
<ul class="action">
<li> <input class="Orange_button" type="submit" value="Start my free trial">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
<div class="column">
<li>
<span > | </span><br/>
<span > or </span><br/>
<span > | </span>
</li>
</div>
<li> <input class="green_button" type="submit" value="Buy it now">
<div class="sub-text"> TEXT TEXT TEXT </div> </li>
</ul>
</div>
Java script code
$('form').on('submit', function(e){
$('[name="retype-email"]').val($('[name="email"]').val());
e.preventDefault()
});
By including e.preventDefault() you're blocking the default behavior of the button. Remove it.
I have created a smart search component inside a dropdown menu. User should be allowed to search within the dropdown depending upon the value entered in the input=text provided in menu.
But when i am clicking on the input the menu gets closed.
I tried using preventDefault as well but still it is not working.
HTML:
<input type="text" readonly="readonly" value="">
<button class="btn i dropdown-toggle" data-toggle="dropdown"> <i class="caret-down"></i>
</button>
<div class="dropdown-menu smart">
<input type="text" placeholder="Search">
<ul class="search-options">
<li>Something</span>
</li>
</ul>
</div>
JS:
// jQuery to prevent default close
$('body').on('click', '.dropdown-menu.smart input', function (event) {
event.preventDefault();
});
Write the following code and it should keep the dropdown open
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help