Google Polymer - how to add content to Neon elements - javascript

The playground
http://labs.recgr.com/polymer-dev/test1.html
My goal
I've managed to replicate this animation, but I need it to have content as well (text and images).
The Problem
Inserting content - I've been experimenting with adding just text for now, and I cannot get it working.
What I've tried
Adding content directly to div circle div container in circles-page.html, it doesn't work properly.
<div class="circle">test</div>
Result:
Getting position with jQuery, on circles-page.html (at the bottom of the page):
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
var sq_pos = $(".square");
console.log(sq_pos.position());
});
</script>
.. and then using that to make an invisible div above that, to display content.
Result: undefined (in Chrome Console)
I also tried using jQuery to add content once Dom is ready, but it didn't work, nor did various properties inside Polymer object I've tried (that I've seen on documentation).
Thank you.

You can use Polymer's layout system to achieve this easily.
To lay out all the circles horizontally, apply horizontal layout to the parent div. Then you just need to use center-center horizontal layout on the child div to center the text.
<div class="horizontal layout">
<div class="circle center-center horizontal layout">test</div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
You can read more about this iron-flex-layout from here.

Related

Set text after a three.js scene defined by a <div id="mainWindow">

I have coded a small Three.js animation that I put i following way in my HTML page :
<div id="mainWindow" class="popup_block">
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
</div>
where I handle the Three.js scene of "mainWindow" in main_simulation.js
Unfortunately, I can't get to put after </div> some text or other HTML elements : they are systematically put above the <div id="mainWindow">... </div> block
You can see this issue on the following link :
Can't put text below Three.js
Maybe this problem comes from the fact that I am loading JS scripts at the bottom of HTML page but I am not sure.
If I load JS scripts in <head> section, I can't make appear the Three.js scene.
Could anyone give me a trick to put text after the main div of Three.js ?
Regards
UPDATE 1 :
I have also tried with :
<div id="mainWindow" class="popup_block"></div>
<!-- Javascript for simulation -->
<script src="../temp/webgl-debug.js"></script>
<script src="../temp/three.min.js"></script>
<script src="../temp/Detector.js"></script>
<script src="../temp/TrackballControls.js"></script>
<script src="../temp/OrbitControls.js"></script>
<script src="../temp/dat.gui.js"></script>
<script src="./main_simulation.js"></script>
<br>
This is a test : I want to put text below the "div id="mainWindow", not above like here :<br>
How could I do that ???
But the problem is still present
UPDATE 2 :
Here's an illustration of my issue :
In HTML source, the text is located below the three.js div, but the rendering makes put it above.
UPDATE 3 :
First of all, its not really a matter of three.js, but there is still an important issue to address.
Whatever functions You have, either plain image positioning, or three.js placing the renderer in a div, It's easy to lose track of what is appended where.
It can happen when the html skeleton is being rather scarce, for most of the page is created in js. It's a bit unclear to anyone but the original developer, so he needs to keep track of what is going on. Imo this is a bit impractical.
I wouldn't create elements in the body in js, I'd rather append them to existing wrapper containers, so I could easily manage them with any css:
<div id="mainWindow"></div>
<div id="image"></div>
<div id="below"></div>
if You switch the target div from the body, to #image, You can rearrange them however You like, without making any changes in the js code, which could cause a chain of unpredicted behaviour.
Now the desired arrangement could be made using the position:relative; css property.

Rearrange the order HTML elements appear in with JavaScript or jQuery

I'm building a modular building program and have a side panel where the user can add the code of a module in order to make it appear in the list.
The list is simply span tags with text in. Since they are already in a set order in the HTML, they appear in that default order when they are made visible, rather than appearing at the bottom of the list each time a new one is made visible.
My workaround is to make all of the spans positioned absolute and use some jQuery/JS to do some calculations and move the latest visible-made span to the bottom.
This code works in moving the input field and button to the bottom of the list:
var searchModule = 0;
$("#add_module_button").click(function(){
searchModule = "#" + document.getElementById("add_module_input").value;
$(searchModule).css('display', 'block');
visibleModules = $('.side_module:visible').length * 50 + "px";
$('#add_a_module').css('top', visibleModules);
});
Is there a better solution out there for re-arranging HTML elements without essentially faking it with absolute positioning?
If I get you right it's actually quite easy. Make use of jQuery.append(). If you use jQuery.append() to append an item to the same container it's already contained in, the item is actually removed from its current location and appended at the end. As far as I read your question that's what you want. The example below shows the basic idea ...
$('#container').append($('#three').css('display', 'block'));
$('#container').append($('#one').css('display', 'block'));
$('#container').append($('#five').css('display', 'block'));
.item{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item" id="one">One</div>
<div class="item" id="two">Two</div>
<div class="item" id="three">Three</div>
<div class="item" id="four">Four</div>
<div class="item" id="five">Five</div>
</div>

Scrollmagic Show and Remove Pin on div entry

I've been playing with Scrollmagic and managed to get a few things working. What I'm trying to do right now is create a sticky social sharing bar for my blog at the bottom of the viewport. I've had no issues managing to get it to show up with my code
// Sticky Share Bar
var stickyShareAnimation = TweenMax.fromTo(shareBar, 0.5,
{ bottom:-50},
{ bottom:0 }
);
var share = new ScrollMagic.Scene({
triggerElement: '.entry',
offset:60,
})
.setTween(stickyShareAnimation)
.setPin('.share-bar')
.addIndicators()
.addTo(controller)
This is the HTML
<section class="share-bar">
<div id="share-container" class="container">
<div class="row">
<div class="col-md-12">This is the content</div>
</div>
</div>
</section>
<section class="blog-content">
<div class="container">
<div class="row">
<article class="single-post">
<div class="entry">
<?php the_content();?>
</div>
</article>
</div>
</div>
</section>
<section class="Test">
Where I want sharebar to tweenout.
</section>
I know I could fade out the sharebar with another Tweenmax animation targetting the "section Test" but figured there was probably a better way to do so with my initial javascript. Is there another way or would I need to create a seperate Tween for the sharebar to hide after content (div.entry) finishes.
Codepen http://codepen.io/anon/pen/aOWBQZ
If you want scrollbound animation (scene duration > 0) then yes, you should create one scene for animating the header in and one to animate it out again.
If you want to trigger an animation and animate the same property (i.e. opacity, when fading in and out) using ScrollMagic's setTween method, there will be problems related to property overwriting.
For details see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another
NOTE: The wiki was written for ScrollMagic 1.3, but the same principle applies.
The recommended solution is this (Updated for ScrollMagic 2.x):
http://jsfiddle.net/xk22Lx50/
An easier solution however might be to define a CSS class and use setClassToggle to add or remove it for a certain time.
Animation can be achieved using CSS animations.
See: http://scrollmagic.io/examples/basic/class_toggles.html
And one more thing:
If your pinned element is always pinned (as in your example) and just animates in or out, but is never part of the DOM flow, there is no reason to make it sticky (i.e. to use ScrollMagic's pin functionality).
Just set it to position: fixed in css and you're done.
You can still use ScrollMagic to animate it in and out, but have less (unnecessary) JS code.

Trouble With jquery.matchHeight

I'm trying to match the height of the content area and sidebar on the following site:
http://www.dev-cheweng.co.uk.gridhosted.co.uk/about/
I've added the following line of code to my file js.js
$('.height-page').matchHeight();
Here is the class for my content area:
<div id="content" class="grid_8 height-page">
And my sidebar:
<aside id="sidebar" class="grid_4">
<div class="content height-page">
The script appear to be loading fine, just they're not matching the height. All I get output for both elements is along these lines:
<div class="grid_8 height-page" id="content" style="">
I did originally target each element in the Js with their individual IDs / classes, but couldn't get that to work either. So then I thought maybe I can only apply the height matching to specific classes, hence me going with .height-page , but of course that doesn't work either
Can anyone see what I'm doing wrong?
From the docs:
$(function() {
$('.item').matchHeight();
});
Will set all elements with the class item to the height of the
tallest.
That means that you have to give your sidebar and your content area the same class (at the moment they don't have a common class)
Here's a demo of it working as expected.

Hiding an element doesn't redraw page correctly in IE8 if the parent elements have a specific combination of display types

I have a problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?
This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>
Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.

Categories