I have a form that includes a button (on the left). On the right I have a picture. So when the user clicks the button, I want the picture to have a return around effect and show another div that displays the result. So here is my code:
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="calorie__button__area">
<button
type="submit"
class="button-secondary button__calculate"
>
BUTTON
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 calculate__content">
<div class="result__box">
<div class="title">RESULT:</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12"></div>
</div>
</div>
.calculate__content__result {
display: none;
}
So at first, calculate__content__result is not displaying. But when the user clicks the button, the image rotates on its Y-axis with the css effect and calculate__content__result should be shown instead of image. I am also really struggling with rotating its Y-axis with the css animation effect.
Could you please help me?
html need some changes:
add <img> tag inside the result__box.
you should change button type to "button" otherwise the page will refresh every time you click on it.
add a unique class name for the tag that contains the first picture.
add onclick attribute to the button and assign "rotate()" to it.
<div class="col-lg-4 col-md-12 col-sm-12 calculate__content">
<form>
<div class="calorie__button__area">
<button
onclick="rotate()"
type="button"
class="button-secondary button__calculate"
>
BUTTON
</button>
</div>
</form>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content first_image">
<img
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 calculate__content__result">
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 calculate__content">
<div class="result__box">
<div class="title">RESULT:</div>
<img
class = "result_image"
src="./assets/img/calculate.png"
alt="Weight Calculation Image"
/>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12"></div>
</div>
</div>
</div>
your initial style should be something like this:
<style>
.calculate__content__result{
display: none;
}
.result_image{
animation: rotation 2s infinite linear;
}
#keyframes rotation {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(359deg);
}
}
</style>
and add this script after </body> tag:
<script>
function rotate() {
document.getElementsByClassName("first_image")[0].style.display = "none";
document.getElementsByClassName("calculate__content__result")[0].style.display = "block";
}
</script>
Related
I used bootstrap 3 -row and column class to separate the buttons. The second button is collapsible which shows the google map. But I want that the collapsible map will take the whole area of the row though it's in a column of that row. Is it possible? Here is my code below:
<div class="row text-center c-green">
<div class="col-md-6">
<button class="btn-large btn-form" data-toggle= "modal" data-target= "#contact-modal">Contact with us</button>
</div>
<div class="col-md-6">
Click the button to see our batch location</button>
<div id="map" class= "collapse"></div>
</div>
</div>
Here is the output image
You have to wrap map outside of col-md-6.
Try this.
.map-wrapper {
width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row text-center c-green">
<div class="col-xs-6 col-md-6">
<button class="btn btn-large btn-form" data-toggle= "modal" data-target="#contact-modal">Contact with us</button>
</div>
<div class="col-xs-6 col-md-6">
Click the button to see our batch location</button>
</div>
<div id="map" class= "collapse map-wrapper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d243647.31729967444!2d78.26761827225342!3d17.41229956311145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb99daeaebd2c7%3A0xae93b78392bafbc2!2sHyderabad%2C%20Telangana!5e0!3m2!1sen!2sin!4v1602912235163!5m2!1sen!2sin" width="100%" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});
<div class="col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
I want to select the first Div which has as child element the balise with this specific data-product-id 10496.
I can't use Css because there are also 2 others div with the same classes.
Thank you
Add a nice recognizable class to that parent. Say product
Use Attribute selector [] to find the desired element by data-*
use .closest()
If found - assign a class like "is-hidden" to .product using Element.classList and the .add() Method:
const prID = "10496";
const EL_prID = document.querySelector(`[data-product-id="${prID}"]`);
if (EL_prID) {
EL_prID.closest('.product').classList.add('is-hidden');
}
.is-hidden { display:none; }
<div class="product col-lg-4 col-sm-6 col-md-4 col-xs-12">
(I want to select this div and make it hidden)
<div class="ad-pric-content">
<div class="ad-pic-style" />
<div class="ad-pric-detail">
<div class="col-lg-12 no-padding prod-fancy-btn">
<a href="javascript:void(0);"
class="btn btn-theme sb_add_cart"
data-product-id="10496"
data-product-qty="1">Sélectionnez le plan</a>
</div>
</div>
</div>
</div>
Question Background:
I have a simple view consisting of a Form, a button and some text. Through CSS i have horizontally and vertically centered the contents of the page.
The Issue:
When a user clicks onto the button I am appending a spinner .gif image to a div. The issue I have currently is as the content is centered appending the image causes the form to move up which dosen't look good.
Code Pen example:
Please see my codepen for a demo of the issue
http://codepen.io/daveharris/pen/dMvaGW
HTML:
<div id="centerDiv" class="centered">
<div class="col-lg-12 text-centered pushDown">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="row">
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
<div class="col-lg-4 form-group text-center">
A HomePage Item
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input type="submit" id="submitBtn" class="btn btn-success btn-block" value="Submit" />
</div>
</div>
<div class="col-lg-12 text-center">
<h4>This is homepage text</h4>
</div>
<div id="loadSpinner" class="text-center">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.pushDown {
margin-top: 50px;
}
.spinnerSize {
height: 60px;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
}
JavaScript & jQuery:
$('#submitBtn').click(function(){
var spinner = '<img src="http://i870.photobucket.com/albums/ab267/GLaDOS_Chibi/Aperture_Science_by_crazychrislau93.gif" class="spinnerSize">';
$('#loadSpinner').append(spinner);
});
How can I go about changing this so the contents is still vertically/horizontally centered by when the button is click and spinner append it dosen't cause the contents to jump up?
You could give #loadSpinner a corresponding height of 60px. This will get rid of the "jumping":
#loadSpinner {
height:60px;
}
Updated Codepen
just need some help on how to change the font color of the title for the current div being selected.
See my code below:
HTML
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="photography" class="photography">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="photography-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<p id="hideshow1" class="btn">Photography</p>
<p id="hideshow2" class="btn">Graphics</p>
<hr class="small">
</div>
</div>
</div>
</div>
<div id="graphics" class="graphics">
<div class="container">
<div class="col-lg-10 col-lg-offset-1 text-center">
<hr class="small">
<div class="row">
<div class="col-md-3">
<div class="graphics-item">
<div class="thumbnail">
<a class="fancybox-thumbs" data-fancybox-group="photo" title="Honda City 98'" href="imgs/pics/resized/car1.jpg"><img src="imgs/pics/resized/car1.jpg" alt="" /></a>
</div>
</div>
</div>
<hr class="small">
</div>
</div>
</div>
JS
$("#hideshow1").click(function(){
$("#photography").slideToggle("slow");
$("#graphics").slideUp("slow");
});
$("#hideshow2").click(function(){
$("#graphics").slideToggle("slow");
$("#photography").slideUp("slow");
});
What I'm trying to do is when I click Photography, it will change the font color and when I click Graphics, the photography color would go back to black and graphics would now be the colored font.
function chgfont(type){
// document.write("<input type=\"button\" id=\"hideshow2\" name=\"hideshow2\" value=\"red\" class=\"btn\" onclick=\"chgfont('B');\"><input type=\"button\" id=\"hideshow1\" name=\"hideshow1\" value=\"blue\" class=\"btn\" onclick=\"chgfont('A');\"> ");
if(type=="A"){
document.getElementById("colorA").style.color ="blue";
// document.write("<font color=\"blue\">Font colors is blue</font>");
}else{
document.getElementById("colorA").style.color ="red";
// document.write("<font color=\"red\">Font colors is red</font>");
}
}
<div class="bar">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<input type="button" id="hideshow1" name="hideshow1" value="blue" class="btn" onclick="chgfont('A');">
<input type="button" id="hideshow2" name="hideshow2" value="red" class="btn" onclick="chgfont('B');">
<hr class="small">
<div id="colorA">
Colored By Santa
</div>
</div>
</div>
</div>
</div>
I hope i can help you.
I would suggest a little different formation of your function. Select the .btn elements and, depending on the clicked element, get the id and perform your actions.
As for the font color, write up a css rule giving the desired color and simply add, or remove this class form the respective elements:
jQuery
$('.btn').on('click', function() {
var that = $(this);
var id = that.attr('id');
//Remove .colored class form all .btn elements
$('.btn').removeClass('colored');
//Add .colored class to the clicked element
that.addClass('colored');
var ph = $("#photography");
var gr = $("#graphics");
//Permorm the appropriate action depending on the clicked id
if (id == '#hideshow1') {
ph.slideToggle("slow");
gr.slideUp("slow");
} else if (id == '#hideshow2') {
gr.slideToggle("slow");
ph.slideUp("slow");
}
});
CSS
.colored { color:red }