jQuery Flip front to 2 different backsides - javascript

I am having trouble getting a certain feature to work.
As you can see here: https://jsfiddle.net/y5jn4tco/1/
<div> CHECK CODE AT JSFIDDLE</div>
I am using the flip jquery plugin which made a flip, where you choose a category, and then gets sent to a certain login screen. My issue is, that I want the bottom one to flip to another backside. I have tried altering the jquery plugin, but without luck. Is there anyone who knows how I could make this work?
So the pink one goes to the pink login, and the blue one goes to the blue login.
Thank you in advance!

You Need To Wrap Your Div int Another Div Then Flip Back Div To Front And Front To back
1 div Is A
2 div is B
A-> 1
Student
2 Company
B -> 2 Buttons
IF Click In btn1 Then Hide company and Flip
$("#centerModuleCompany").css('display','none');
$("#centerModuleStudent").css('display','block');
IF Click In btn1 Then Hide Student and Flip
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');

I Wrap The Student And Company Into Main Div I Also rotate Main Div#centerMain Front And Back
Then If You Clicked In Student Then Company Form Hide And Student Display In Div#centerMain
If You Clicked In Company Then Student Form Hide And Company Display In Div#centerMain
And I Change #back To .back
I Solve This In Fork Try This
https://jsfiddle.net/ehab6sqs/

Made some changes to your document.ready function as below:
Here is the DEMO
$(document).ready(function(){
$(".cards").flip({
trigger: 'manual'
});
$("#loginStudent").click(function(){
$(".cards").flip(true);
$("#centerModuleStudent").css('display','block');
$("#centerModuleCompany").css('display','none');
});
$("#loginCompany").click(function(){
$(".cards").flip(true);
$("#centerModuleCompany").css('display','block');
$("#centerModuleStudent").css('display','none');
});
$("#back1,#back2").click(function(){
$(".cards").flip(false);
});
});
I noticed that you have same ids for back button which is violating DOM element rules so I've changed it to back1 and back2 respectively and I am just hiding the alternative div on click of each button and showing the required div
Your CSS changes:
#back1,#back2 {
position: absolute;
left: 10px;
top: 10px;
height: 20px;
cursor: pointer;
}

Related

How to dynamically change the Tweet button without it blinking?

I am trying to have the Tweet button updated dynamically so that different text is tweeted (if one presses the Tweet button) every time some event happens.
Actually, what I am trying to achieve is the same as described in the following question:
Dynamically change Tweet Button "data-text" contents
And the provided answer to that question works ok with one annoying small problem. If I implement it like that, the Tweet button blinks when it's updated (disappears and appears) because it is rendered from scratch by using
twttr.widgets.load();
Does anyone have an idea on how would I achieve the same thing but without the "blinking"?
The way I finally solved this was like so.
In the html file I define two divs one after another:
<div id="share_fixed">
<a class="twitter-share-button" href="http://twitter.com/share" data-url=" " data-size="large" data-show-count="false" data-text=" ">
</a>
</div>
<div id="share">
</div>
The div with id="share_fixed" will contain a Tweet button which will be static (rendered only when the page loads).
The other div with id="share" will contain the Tweet button which will be rerendered (updated) every time some event occurs.
In the CSS I position both divs at the same location and overlay the one which changes on top of the fixed one:
#share {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 1;
}
#share_fixed {
position: absolute;
bottom: 12px;
left: 15px;
z-index: 0;
}
This will actually force the fixed "dummy" Tweet button to always be positioned below the one which changes and blinks on reload. Whenever the button on top changes and "blinks" the one below it will remain and since it's exactly the same, it will seem like nothing changes.
In the Javascript file I add e.g. something like this:
var tweetBtn = $(document.createElement('a')).addClass("twitter-share-button")
.attr('href', 'http://twitter.com/share')
.attr('data-url', ' ')
.attr('data-size', 'large')
.attr('data-show-count', 'false')
.attr('data-text', "Some new tweet text");
$("#share iframe").remove();
$("#share").append(tweetBtn);
twttr.widgets.load();
I guess there are more ways to solve this, but this works for me on Chrome, haven't tried on other browsers.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

the overflow shows just a gray line

My website is mostly Single Page Website, but there are some pages that only registered users can enter there. In the first "block" (I can't find other name. I'm speaking about areas in the single page website) there are a button named "Login / register", and when you click on her it shows you a login and registration form.
Because in the registration you should give us a lot of info (first and last name, email, password - twice, recaptcha and checkbox about the terms of use), we designed it like it is a different page, but to make the process faster I decided that it will be on the main page in position:fixed;, overflow:auto; and display:none; and when you'll push the "login / register" button it will change to display:block; and it will add overflow:hidden; to "body" and "html". Every thing works great, you even can scroll up and down, but the scroll bar itself seems strange.
Here is the JS (jQuery) code:
function login(){
$('#loginpopup').css({"display":"block","opacity":"0"});
$('#loginpopup').animate({"opacity":"1"});
$('body').css({"overflow":"hidden"});
$('html').css({"overflow":"hidden"});
return false;
}
Here is a screenshot of the page with the problem:
Use
overflow: visible;
instead of
overflow: auto;
in #loginpopup
Your problem comes from the div with class backgroundcolor, which is fixed and has a width and a height of 100%. This div displays over the scrollbar. Get rid of this div and try to put the grey background in the body element.

Changes set of images on click - Fotorama

Is there a way to change the images that are in Fotorama when I click in a div?
For example, I have two divs, one called #NYPhotos and the other called #WAPhotos. When I click on div #NYPhotos, Fotorama appears below it, showing the photos I took in New York. After that, when I click on #WAPhotos, the images in fotorama are swapped to the photos of Washington.
I was able to make Fotorama appear with the NY photos, but had no luck trying to swap the images... Any ideas?
First, I would recommend reading the answer to this question which should help: How to change an image on click using CSS alone?
If you don't want to read that then basically the main idea is:
input[type="checkbox"]:before {
content: url('images/icon.png');
display: block;
width: 100px;
height: 100px;
}
input[type="checkbox"]:checked:before {
content: url('images/another-icon.png');
}
Just make each section a div using CSS. Hope this helped!

jQuery: How to animate two elements without them bumping each other

I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.
Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)
Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.
How do I get them to both slide at the same time and keep their positions?
PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.
Update:
Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.
Update 2:
New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/
Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.
Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.
See this jsFiddle: http://jsfiddle.net/744BL/
Notes: Using IDs as selectors caused some problems that switching over to classes didn't.
This css would do
html, add container with id task-details-container to task-details
CSS
#task-list table {
width: 75%;
}
.details-active {
padding-right: 0px;
}
#task-details-container {
width: 25%;
float: right;
}
#task-details {
width: 100%;
padding: 0;
display:none;
}
I hope this is what you wanted, please see the css i have changed
**Updated

Categories