Why doesn't the 'next button' work in a smaller screen? - javascript

I am trying to modify this code from site point, but I can't figure out why the 'next' button doesn't work in the screen size of 345px and below. What is the problem? I appreciate your help. Please see here for the complete code:
https://codepen.io/SitePoint/pen/GmPjjL
<h1>Quiz on Important Facts</h1>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Previous Question</button>
<button id="next">Next Question</button>
<button id="submit">Submit Quiz</button>
<div id="results"></div>

Because label tag overlap the button tag

It doesn't work because your previous label tag is overlapping the button tag.
Change the position of the button and apply z-index to fix it.
button{
position: relative;
z-index: 4;
}
New Codepen Link

Related

getting a button to respond in size to responsive div

I have a Google Map within a responsive div so that the map changes size depending on screen size, which is working perfectly. I also have a button above the map. I need this button to always be the same width of the map, is this possible?
My column:
<div class="col-lg-6">
<br />
<p>
<button style="width:60vh" formtarget="_blank"
onclick="window.open('https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode')"
type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</button>
</p>
<div class="embed-responsive embed-responsive-16by9">
<div id="map" class="embed-responsive-item"
style="border: 1px solid black;"></div>
</div>
</div>
How it looks currently at full screen size (perfect):
How it looks currently at small screen size (button is too large):
At first: Please don't use a button when its purpose is the same as an link / anchor. So please use an <a href="…"> element and style it like a button.
The solution for your problem is to use relative sizes that doesn't depend on the screen size. You can use the following solution:
<p>
<a style="width:100%" href="https://www.google.com/maps/search/?api=1&query=#Model.OfficialSchoolName+#Model.Address1+#Model.County+#Model.Eircode"
class="btn btn-primary">
<span class="glyphicon glyphicon-road" aria-hidden="true"></span>
Get Directions
</a>
</p>
It's hard to replicate without having your google maps api key, however i would try and put the map and the button in the same div container and give the width of the button and map div the same percentage
<div class="container">
<div class="button">
<!-- button here -->
</div>
<div class="map">
<!-- map here -->
</div>
</div>
.button {
width: 100%;
}
.map {
width: 100%;
}
You will just then need to set the property of your button and map to 100% width as they will both be in their own containers
working example can be found here https://codesandbox.io/s/awesome-dust-7hkpz

jQuery Tooltips only in HTML Code but not visible

I am trying to get some good looking help buttons on my website with jQuery and tooltips.
However they appear when you search the Element but they don't show.
Here's some code:
<div class="card-header">
<h5 style="float: left">Eckdaten</h5>
<button id="help" type="button" class="btn btn-outline-secondary"
data-toggle="tooltip" data-placement="left"
title="TestTest" style="float: right; padding-left: 8px; padding-right: 8px">
<i class="fas fa-life-ring"> <Hilfe
</button>
</div>
in script section:
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
src files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.js">
</script>
Whenever hovered, a tooltip appears in the html code but the actual box isn't showing.
Thank you so much for your help!
You have invalid HTML structure there. Your font awesome icon needs to be closed.
Replace <Hilfe with closed </i> will fix the issue.
https://jsfiddle.net/davidliang2008/2dqa1fvu/4/

Image div class and margin class

I am using bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.

Why is the animation not playing when I click on the button?I have created an animation in three js

I am trying to animate the boxes by clicking on the start button, but when I click on the start button, the boxes don't move. What is wrong?
Here is the github:
https://github.com/Garima5/negativeWorkDone/blob/master/index.html
<div id="info">
<form>
<button type="submit" id="animate" onclick="animate()">Start</button>
</form>
</div>
Leave it as
<div id="info">
<button id="animate">Start</button>
</div>
and then in the code of your script, for example, right before the animate() function put this:
document.getElementById("animate").addEventListener("click", animate, false);

Bootstrap make part of the image clickable

Fairly new to this. At the moment I have an image and a button in one of the containers in my front page. I'm trying to embed that button into that image. Should I
make part of that image clickable, and let that trigger a function?
or force that button to float on certain position of that picture?
Or is there another way that I should follow? and how do I implement this? Many thanks!
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="../img/background.png" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
You can use position: absolute to make it float on the image. look at this
https://jsfiddle.net/5ueau24b/1/
#s
{
position: absolute;
margin-left: -200px;
margin-top: 130px;
}
<div class="col-md-10 col-lg-offset-1 text-center">
<img src="http://www.planwallpaper.com/static/images/images_1_05GM1zY.jpg" class="rounded" alt="">
<button type="button" id="s" class="btn" >Make payment</button> //I'm trying to have this button float on that image above
</div>
Try using imagemap of html. (map tag in specific)

Categories