We Keep Coding

Rotate image on its Y-axis and show different div

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>

How to pass and get data attribute inside vue components

I'm new to vue, but I'm learning how to use it without webpack.
I have the necessity to use some components nested inside a main component that will render the homepage of my wordpress custom theme. The components I want to nest need to pass a data attribute to an ajax call that will fetch the related data to display, I will set it manually for each instance of it I need to use. How I can do this?
This is the component code
Vue.component('theme-section',{
template: '#section-tpl',
data(){
return{
sectionData: []
}
},
mounted: function(){
this.getSection();
},
methods: {
getSection: function(){
axios.get(theme.base_url+'theme/v1/sections?slug='+ )
.then( (response) => {
console.log(response.data);
response.data.forEach( (item, i) => {
this.sectionData = [item];
});
});
}
}
});
This is the markup of the component. I'm loading it using get_template_part() function of wordpress in the footer of the theme where also all the other components markup is loaded.
I will call it inside the home component I have definde
<script type="text/x-template" id="section-tpl">
<div class="container-fluid p-0">
<div class="row m-0" v-for="section in sectionData" :data-section="" >
<div class="col-sm-12 col-md-12 col-lg-12 p-0">
<!-- <a class="h4 mt-5" href=""></a> -->
<div class="col-sm-12 col-md-6 col-lg-6 p-4">
<h1 class=" font-weight-bold mt-3 mb-3"></h1>
<h4 class="mt-3 mb-3"></h4>
</div>
</div>
</div>
</div>
</script>
// this is the home component markup where the other component will be reused
<script type="text/x-template" id="home-tpl">
<div class="container-fluid p-0">
<div class="row m-0" v-for="page in pageData">
<div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page._embedded['wp:featuredmedia'][0].source_url">
<img class="img-fluid w-100" :src="page._embedded['wp:featuredmedia'][0].source_url">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
<h1>{{ page.title.rendered }}</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>
</div>
<theme-section data-section="about"></theme-section>
</div> <!-- end container-fluid -->
</script>

Selenium - cannot click on an element inside a modal

I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is‌​-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out

As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();

I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...

Bootsrap Begineer - change width of div with different screen size

I am a beginner to Bootstrap. I am trying to accomplish the following:
To make a div that is 2 columns wide on medium and large viewports and 12 columns on extra small viewports.
I understand that bootstrap works in rows and columns(12) and that the columns have breakpoints at which they 'break' and stack as and how applied when the screen size changes. I am thus not sure how to change the width of a div as above.
Can this be done just by using Bootstrap?
They way I think this could be implemented is using javascript to get the screen size(pixels width) and then changing the width value of the div. What could be the approach? Any leads or suggestions would be helpful.

You can simply add more classes according to the viewport width:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
The above gives you an output of 4 columns for larger viewports, 3 for medium and 2 for smaller.
Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Extra small devices Phones = col-xs-n
Small devices Tablets = col-sm-n
Medium devices Desktops = col-md-n
Large devices Desktops = col-lg-n
if you want 2 columns side by side at smaller viewports, you'll need to add them all in the same row:
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>
This will give you the following output at smaller viewports
Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6

You can easily do this, like so:
<div class="col-xs-12 col-md-2"></div>
It's that easy. At the md breakpoint (970px) and above, that div will occupy 2 columns; prior to that it will occupy 12, but you can change the col-xs-12 to any number you'd like.
The bootstrap grid system is easy to get the hang of and you don't need javascript to use it. Read about it here

No you don't need js for that bootstrap grid system will suffice.
You should consult these docs to understand grid system in details--
w3 schools
example
.col-lg-2, .col-md-2, .col-xs-12
{
background-color: blue; height:500px;
}
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-xs-12">
</div>
</div>
</div>
</body>
</html>

Bootstrap Grid thumbnails with expanded preview on click

I have an application, part of which is listing posts for a user profile:
<div class="row">
<%#posts.each do |x|%>
<div class="col-lg-4">
<%=x.body%>
</div>
<%end%>
<div class="row">
<div class="col-lg-12" style="border:1px solid black">
dsafasf
</div>
</div>
If i wasn't using dynamic data (lots of posts), this is what i want to happen ultimately (one row of posts shows up - then on click the large row underneath is toggled):
https://jsfiddle.net/nk2vLhhp/2/
However, I am trouble having this work with dynamic data. It is currently just showing one large row at the end of all posts (not just one row of posts). I want one large col-12 row after every three posts
How would i go about doing this? Any help please?
PS: My end, end goal is something like this: http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/

There are many ways to do it.
Method 1 :
$('.col-xs-4').click(function() {
$(".explanation").slideUp().remove();
var $desc = $("<div/>", {
class: 'explanation row'
}); //it can contain a close button like the others.
$desc.html($(this).find('.hidden').html());
$(this).closest('.row').after($desc).slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4">
post 1
<div class='desc hidden'>Post 1 description</div>
</div>
<div class="col-xs-4">
post 2
<div class='desc hidden'>Post 2 description</div>
</div>
<div class="col-xs-4">
post 3
<div class='desc hidden'>Post 3 description</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
post 5
<div class='desc hidden'>Post 5 description</div>
</div>
<div class="col-xs-4">
post 6
<div class='desc hidden'>Post 6 description</div>
</div>
<div class="col-xs-4">
post 7
<div class='desc hidden'>Post 7 description</div>
</div>
</div>
Method 2 (with animation) :
Almost same as above but instead of creating the div.explanation everytime, simply define it hidden in the html, beneath every row.
https://jsfiddle.net/nk2vLhhp/13/
$('.col-xs-4').click(function(e) {
var $target = $(e.currentTarget);
$('.explanation').hide();
var targetClass = $target.attr('data-target');
$('.' + targetClass).removeClass('hidden').hide().slideDown();
});
.col-xs-4 {
border: 1px solid black;
}
.col-xs-12 {
border: 1px solid black;
}
.hidden {
display: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4" data-target='1-content'>
post 1
</div>
<div class="col-xs-4" data-target='2-content'>
post 2
</div>
<div class="col-xs-4" data-target='3-content'>
post 3
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
<div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
<div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
<div>
<div class="row">
<div class="col-xs-4" data-target='4-content'>
post 4
</div>
<div class="col-xs-4" data-target='5-content'>
post 5
</div>
<div class="col-xs-4" data-target='6-content'>
post 6
</div>
</div>
<div class='row'>
<div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
<div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
<div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
<div>