Any reason why this wouldn't work?
<button class="btn btn-primary btn-lg" onClick="location.href='http://anothersitehere.com/file.pdf'">Download PDF</button>
You would try with this instead
<a class="btn btn-primary btn-lg" href="http://anothersitehere.com/file.pdf">
Download PDF
</a>
Leaving location.href blank and in javascript function give
document.location.href='page.php?variable='+value;
it will redirect to the page you want.
It's seems that it is working regarding on going to the link. I'm using Chrome btw.
Related
I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.
change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>
If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>
When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>
<button type="submit" class="btn btn-primary submitSignUp" >Sign Up</button>
Why does this not work? I have a different page called signUp and on-click of the sign-up button, I want it to go to the signUp page.
You should not place <button> inside <a> element as <button> consumes mouse events preventing <a> element click generation.
So try just this
Sign Up
to have the same result I would suggest you to change your code to this:
<a class="btn btn-primary submitSignUp" href="signUp.html">Sign Up</a>
I want to know how i can make a javascript that pushes a button on a website. I have tried to search the forum but nothing i have found is working. the button i am trying to make the script for is:<button class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7"><span> 1 to 7</span><span></span></button> it is located under 7 "div"
Something like this:
<html>
<body>
<button id="myButton" class="btn btn-danger btn-lg btn-block betButton" data-lower="1" data-upper="7" onclick="alert('hello');"><span> 1 to 7</span><span></span>
</button>
<script type="text/javascript">
document.getElementById('myButton').click();
</script>
</body>
</html>
I have a lot of buttons that look like:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>
I'd like to avoid so much repetition; is there any way to define some sort of single attribute that will expand to several other attributes? For example it might end up looking like
super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';
<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>
NB. Of course this could be done with server-side scripting but I'm hoping to avoid that. I am using Bootstrap 3.3.4 , these buttons trigger a Bootstrap modal.
This works:
<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>
and in the Javascript section
$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");
This removes most of the repetition however I am still wondering if there is a more elegant and/or runtime-efficient way.
Sounds like you might be looking for a client side view framework such as Handlebars or React.js. Where you can send (and cache) the templates on the client and then bind to JSON you retrieve from the server.
You could use a full stack framework such as Ember.js or Angular, but that is probably more than you need.