Develop Reference

How to flip a card inside Angular ngRepeat

I have a series of "cards" displayed inside of a container using ngRepeat as follows
<div class="flip-container">
<div style="display:inline-block" ng-repeat="c in vm.car">
<my-car-card car='c'></my-car-card>
</div>
where <my-car-card> is a custom directive. Adding to a previous example I had, I wanted to try and flip these cards on certain events (here just using a button click. I have been following an example from another post, which points to this fiddle, but I just cannot get it working in my case. I have tried to use this method as at this plunk.
I have copied the css into style.css and renamed the class flip1 to flip-container, and stripped out some of the size and color, so they do't override any of my existing styles I will have for the 'card'.
The "parent container" in main.html is in the snippets shown above, and the rest is in the car.html..
<div class="card car-card" ng-class="{'flipped':isFlipped}"
style="padding: 5px;margin:5px;background-color:wheat">
<div class="face front">
<div class="cartitle">
<div class="cartext" >{{car.title}}</div>
</div>
<div class="carul" ng-repeat="p in properties" animate-on-change="p.text">{{p.text}}</div>
</div>
<div class="face back">
Back of card
</div>
and I am setting the 'flipped' at the line _scope.flipped = !_scope.flipped; in car.js as below.
function onChange(msg, data) {
if (_scope.car.title === "CAR 001"){
_scope.properties[0].text = data + (i++);
_scope.flipped = !_scope.flipped;
}
}
the onChange is called on the button click, I am setting one other property in there just so I can see it is being called)
As can be seen, at the plunk, it is not working for me at all, and the display is totally messed up (removing the line position: absolute; .flip-container .card .face { allow the display to be fixed).
Hoping someone who knows and understands this css trick better than myself can point t what I am doing wrong in attempting to transfer this over into my scenario, I Just cannot see what is wrong and how to move forward.
Thanks in advance for any help here!

Change a few things:
add height and width to style: ".flip-container .card"
add this to HTML 'card' tag: ng-click="isFlipped=!isFlipped"
Change this css:
.flip-container .card .back {
-webkit-transform: rotatex(-180deg);
}
Here's your modified plunk:
http://plnkr.co/edit/xaznyVXJvfa7UDcSlB2e?p=preview
Oh, and you need to set "isFlipped" - NOT "flipped" in your function. like this:
scope.isFlipped = !scope.isFlipped;
I updated that in the plunk as well

Why does my jquery plugin stop working after I put it in a div container?

So basically I am using a jquery plug-in called blueprint split layout. The code for it can be found at: http://tympanus.net/Blueprints/SplitLayout/index.html. I modified the code to fit with my website theme and it worked perfectly, that is until I put it inside a section container with a class of content. Whenever it goes into this container, it ceases to function. However, if I keep this out of the div container, it functions beautifully, but screws the rest of the site layout up. I have searched for days for a solution, and I have tweaked and rebuilt my code to no end with no success. Can anyone please tell me what is going wrong? On another note, I did notice that some of my links are not working either when in this container. I've tried tweaking it to a div container, a section container, and article container, nothing works.
Here is a link to my html: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.html
The code in question is:
<div class="splitcontainer">
<div id="splitlayout" class="splitlayout">
<div class="intro" >
<div class="side side-left">
<div class="intro-content">
<div class="profile_containerL">
<div class="profile"><img src="imgs/profile1.jpg" alt="profile1">
</div>
<div class="h1s"><span>Andrew Mac Gregor </span>Web Designer
</div>
</div>
</div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="profile_container">
<div class="profile"><img src="imgs/profile2.jpg" alt="profile2"></div>
<div class="h1s"><span>Brittney Mac Gregor </span>Web Developer</div>
</div>
</div>
</div>
<Article>
<div class="page page-right">
<div class="page-inner">
<div class="back_R">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Development</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<div class="back_L">
<a href="javascript:history.go(0)">
<img src="imgs/whiteX.png" alt="BACK" />
</a>
</div>
<div class="section">
<div class="h2s">Web Design</div>
<p>...</p>
</div>
</div><!-- /page-inner -->
</div><!-- /page-left -->
</div><!-- /intro -->
</div><!-- /container2 -->
</div><!-- /splitcontainer -->
Here is one to my css: http://codepen.io/luvmeeluvmenot/pen/avzxqZ.css
The css code in question is:
.side-left,.side-right{color:#fff;background-image:url(../imgs/ABbg.png)}.page,.side{-webkit-backface-visibility:hidden}.splitcontainer{position:inherit;height:600px;margin-left:auto;margin-right:auto;overflow-x:hidden;z-index:2000}.side{position:absolute;top:0;z-index:100;width:50%;height:600px;text-align:center;background-color:#000}.close-left .side-left,.close-right .side-right,.open-left .side-left{z-index:200}.open-left .side,.open-right .side{cursor:default}.side-left{left:0}.side-right{right:0}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%}.profile img{max-width:100%;border-radius:50%}.intro-content .h1s>span{display:block;white-space:nowrap}.intro-content .h1s>span:first-child{font-weight:300;font-size:2em}.intro-content .h1s>span:nth-child(2){position:absolute;margin-top:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.8em}.intro-content .h1s>span:nth-child(2):before{position:absolute;top:0;left:25%;width:50%;height:2px;background:#000;content:''}.profile_container,.profile_containerL{padding-top:20px;background-color:rgba(0,0,0,.8);border-radius:20px}.profile_container{box-shadow:2px 3px 5px -1px rgba(255,255,255,.8)}.profile_containerL{box-shadow:-2px 3px 5px -1px rgba(255,255,255,.8)}.side-right .intro-content h1>span:nth-child(2):before{background:#000}.back_L{float:left}.back_R{float:right}.back_L img{float:left;width:50px;height:50px}.back_R img{float:right;width:50px;height:50px}.back_L img:hover,.back_R img:hover{opacity:.4}.mobile-layout .back{position:absolute}.back-left{left:12.5%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.back-right{right:12.5%;-webkit-transform:translateX(50%);transform:translateX(50%);color:#fff}.open-left .back-right,.open-right .back-left{visibility:visible;opacity:1;-webkit-transition-delay:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.page-left,.page-right{background:#000;color:#fff}.page{position:absolute;top:0;overflow:auto;min-height:100%;width:75%;height:600px;font-size:1.4em}.page-right{left:25%;outline:#000 solid 5px;-webkit-transform:translateX(100%);transform:translateX(100%)}.splitlayout.open-right{background:#000}.page-left{left:0;outline:#fff solid 5px;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.splitlayout.open-left{background:#fff}.page-inner{padding:2em}.page-inner .section{padding-bottom:1em}.page-inner .h2s{margin:0 0 1em;font-weight:300;font-size:2em;font-family:audiowide}.page-inner p{font-weight:200;font-size:.8em}.page,.side{-webkit-transition:-webkit-transform .6s;transition:transform .6s}.overlay{-webkit-transition:opacity .6s,visibility .1s .6s;transition:opacity .6s,visibility .1s .6s}.intro-content{-webkit-transition:-webkit-transform .6s,top .6s;transition:transform .6s,top .6s}.intro-content h1,.reset-layout .page,.splitlayout.close-left .page-right,.splitlayout.close-right .page-left,.splitlayout.open-left .page-right,.splitlayout.open-right .page-left{position:absolute;overflow:hidden;height:600px}.splitlayout.open-left .page-left,.splitlayout.open-right .page-right{position:absolute;overflow:auto;height:600px}.open-left .side-right .overlay,.open-right .side-left .overlay{visibility:visible;opacity:1;-webkit-transition:opacity .6s;transition:opacity .6s}.open-right .side-left{-webkit-transform:translateX(-60%);transform:translateX(-60%)}.open-right .side-right{z-index:200;-webkit-transform:translateX(-150%);transform:translateX(-150%)}.open-right .side-right .intro-content{-webkit-transform:translateY(-50%) translateX(0) scale(.6);transform:translateY(-50%) translateX(0) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0);transform:translateX(0)}.open-left .side-right{-webkit-transform:translateX(60%);transform:translateX(60%)}.open-left .side-left{-webkit-transform:translateX(150%);transform:translateX(150%)}.open-left .side-left .intro-content{-webkit-transform:translateY(-50%) translateX(-100%) scale(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0);transform:translateX(0)}
The javascript being used for this site can be obtained from blueprint site listed above The two names of the javascript files are cbpSplitLayout.js and Classie.js, as well as the included modernizer.js file from the site.
Can anyone please help me figure out why javascript would stop once the plug-ins html is placed in the main wrapper section? Thanks in advance.

Well it's been a few days and I want to I guess provide my own answer to my question. I don't have the "exact" answer, however, this is what I have found to fix the issue. The original issue was that every time I placed my jquery coded html inside the main wrapper div, the jquery functions would not work at all. Basically I'm building a parallax one page site that has multiple slides. The second slide from the header has the jquery plug in that is suppose to have two profile pics on it. One side for the developer and one for the designer. When either profile is clicked, depending on which one, the plugin is suppose to make the page slide open either left or right. Upon clicking the "x" I put inside the inner page, the page refreshes and shuts the sliding profile.
I noticed that when this was placed inside the main wrapper div that the rest of my content was in, it ceased to function. I still cannot explain why that is. However, if I placed it on the outside of the wrapper, it would automatically become fixed at the top, blocking my fixed header. That I cannot explain either. I tried creating two different wrappers, one for the first slide, leaving the jquery code out of that wrapper, then another wrapper to place the remaining content in, but still the jquery code would just become fixed to the top of the screen and block the header. It would work, mind you, but completely wrong positioning. So... my solution, although perhaps not the right one to the issue, was to re-create all the html code. This time, I added each slide 1 at a time and messed about with the positioning finally getting the whole page to function correctly when in a relative position, aside from my header and footer being fixed. Now the plug-in works beautifully and the page is taking shape into what I wanted it to be. So... my conclusion, although I can't explain the details, is that when using a jquery plugin, the positioning of that part of html code that responds to the js, relies on positioning. Apparently the only positioning that would work in my case was relative. Another guess as to why this could be was because the plug-in was designed to be a one full page plug-in and I tweaked the html to get it to fit in a 1903px width by 600px height container. Hopefully this will help someone out there struggling with the same issue.

Comment out element when hidden

I want to use JavaScript to comment out a text within a div.
For example, I got <div> This is a text</div>. I want to use code so that unless this is visible, then it's commented out.
<!-- -->
I got 3 tabs, which I can click to see a different text, image, video within the div.
Here is a JSFiddle of what it looks like.
I tried changing the text and that's not so hard but I can't make a code that works the way I want. I want the hidden divs content to be commented out so as not to lag the site, but when I click on a hidden div I want the commented out part to be uncommented out.
This is the script used to switch and hide divs.
$('.Options div').click(function() {
var i = $(this).index();
$('.Frames').hide();
$('#Action' + (i + 1)).show();
});
This is the HTML code:
<div class="Options">
<div class="OptionsTab">OptionRed</div>
<div class="OptionsTab">OptionGreen</div>
<div class="OptionsTab">OptionBlue</div>
</div>
<div class="Holder">
<div class="Frames" id="Action1" style="display: block;">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action2">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action3">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
</div>

commenting out with javascript will not save you memory or loading time, as the sources have already been loaded from server
instead of hiding nodes with hide() (display:none) you can remove the nodes at client side by
$('.Frames').remove();

1) Use a some data- attribute for saving current inner html of element in dataset
2) Clear the current inner html of element with $('your_selector').html(" ");
3) Return inner html from data- attribute into element
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

django-cms div tags with cmsplugin class interfering with slider

I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.

django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.

multiple elements with the same id

i've heard using multiple id attributes is very bad practice but what confuses me is what if the elements are nested like this...
<div id="slideshow1" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
i've made an example with js here and everything seems to work fine..
http://jsfiddle.net/6YPsX/
if they were nested within the same element then unique id's would make sense but do ID's really need to be unique to the whole document?

An ID is more than just a way of finding an element, there are other things associated with an ID. The following link should be helpful and provide a greater insight into this. Here are the main points:
The id attribute has several roles in HTML:
As a style sheet selector. As a target anchor for hypertext links.
As a means to reference a particular element from a script.
As the name of a declared OBJECT element.
For general purpose processing by user
agents (e.g. for identifying fields when extracting data from HTML
pages into a database, translating HTML documents into other formats,
etc.).
link to w3 site

You can have multiple classes on the same element
<div id="slideshow1" class="slideshow">
<div class="slideshow-arrow left"></div>
<div class="slideshow-arrow right"></div>
</div>
CSS
.slideshow-arrow {
background: none top left no-repeat;
width: 20px;
height: 20px;
}
.slideshow-arrow.left {
background-image: url('...');
}
.slideshow-arrow.right {
background-image: url('...');
}

It is a bad practice it won't pass W3C validation and it get's even worse when you try to implement JavaScript. Just use a class name instead or give them different id names.