I have this code as a custom element:
<link rel="import" href="../paper-ripple/paper-ripple.html">
<polymer-element name="menu-item">
<template>
<style>
:host {
box-sizing: border-box;
position: absolute;
font-size: 16px;
width:100%;
}
.center{
text-align: center;
}
</style>
<div class="item">
<div class="content center" fit>
<content select="*"></content>
</div>
<paper-ripple fit></paper-ripple>
</div>
</template>
<script>
Polymer({
});
</script>
It is instantiated as follows: <menu-item>Home</menu-item>
Problem is, either the ripple fires and the link does not.
Or the link fires but the ripple does not.
How should I be doing this?
Thanks,
g3
I think the basic problem is that the way you have it structured, the anchor tag and the paper-ripple are siblings, so there's no way for the click event to bubble up from the ripple to the anchor, or vice versa.
One approach would be to have the anchor tag inside your element and use data binding, like so:
<div class="item">
<a href="{{url}}">
<div class="content center" fit>
{{text}}
</div>
<paper-ripple fit></paper-ripple>
</a>
</div>
...
<menu-item url="{{url('#/')}}" text="Home"></menu-item>
Full demo here:
http://jsbin.com/bumiva/3/edit
Another approach would be to use your original structure and add a click listener on the outer <div> and follow the link manually, like this:
http://jsbin.com/wadiwu/2/edit
Hope this helps.
I was able to get it to work by changing your code to create the element to have the anchor tags around the element, like so:
<menu-item>site</menu-item>
removing select="*" from your content element, and giving your :host style some height. I set mine to height: 32px;
Related
It seems my class is not working in my JS code. I have attempted a few ways so I'll show you what I have done.
<h2 id="firstbutton" class="firstbutton" type="button">Let's go!</h2>
This method let me style, but a button was definitely not visible.
My other way was replacing this with a "button" tag, but this did not let me style the button although I used the class.
<button id="firstbutton" class="firstbutton"> Let's go!</button>.
This way actually gives me a button, but it was tiny and was not very helpful. Remember in my CSS code I used both of the two methods:
.firstbutton {text-align: center;}
And my second one:
#firstbutton {text-align: center;}
I hope I gave enough information as reference and this question does not closed. I am trying to think of another way.... renaming perhaps?
Thank you very much!!
Your code is generally correct, cut there are several things you need to consider.
If the parent tag of your <h2> is <body> tag, then this .firstbutton {text-align: center;} code will work.
But if the parent tag of your <h2> is not <body> tag, you have to align the parent to the center. Example:
if the parent code is <div>, like this:
<div>
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
you have to make it like this:
<div align="center">
<h2 class="firstbutton" type="button">Let's go!</h2>
<button class="firstbutton">Let's go!</button>
</div>
Or if you want to use CSS, you can read this great article.
Let me know if this helpful
You can make a button in two ways: using <input type="button" value="Content!"> and <button>Content!</button>.
Styling the buttons using classes and ids as you are doing works as normal.
However, if you are trying to center-align the button, you have to put the styling on the parent element, like so:
.parent {
text-align: center;
}
input, button {
color: red;
}
<div class="parent">
<input type="button" value="Content!">
<button>Content!</button>
</div>
I have first time problem like that. Text is not wrapping in span (if I changed it to div too) inside bootstrap col.
CSS word-wrap is not working, i have no idea what to do. Span is display inline-block with width: 100%
This is my structure:
<div class="col-4 dropdown-item-container">
<a class="z-depth-1 dropdown-item" href="#">
<img class="dropdown-image" src="img/cat8.jpg" />
<span>System do wykonywania połączeń DOMINO</span>
</a>
</div>
And it's looks like that:
I found problem, in bootstrap class .dropdown-item have set white-space: nowrap;
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4
This must be simpler than I'm making it out to be. Not sure what's going on.
I have a DIV that I'm "filling" with a Handlebar template. Once the template is generated, I use a jQuery slideDown to open the panel to view the contents. Now I need to put a close function to slideUp the DIV.
I think the problem is the click function isn't getting bound because the a.close element is within a script tag.
Here's the DIV for the content:
<div id="characteristic" style="bottom:0px; width:800px; display:none; position:fixed; left: 350px;"></div>
Here's the jQuery snippet. This is at the top of the HTML:
$(document).ready(function(e){
$("a.close").click(function(e) {
e.preventDefault();
$("#characteristic").slideUp();
});
});
And a snippet of the template:
<script id="ac-template" type="text/x-handlebars-template">
<div class="holder" style="background-color:#FFFFFF;">
<div class="frame">
<div class="content">
<div class="info-box-holder">
<a class="close" href="">×</a>
<div class="heading">
<h2>ACTIONABLE CHARACTERISTIC</h2>
</div>
<div class="info-box">
<img class="alignleft" src="{{image_large}}" alt="" width="400" height="400" />
{{#if subcategory_name}}
<h2>{{subcategory_name}}: {{name}}</h2>
{{else}}
<h2>{{category_name}}: {{name}}</h2>
{{/if}}
I know this is an old question and you've probably already worked out the answer, but yes, it's because at the time that your JS code runs, a.close does not exist in the DOM.
You need to either run the JS code after handlebars has finished rendering the template, or bind to a higher level DOM element that exists on page load (a container of some sort) and then activate only for the link that you want. Something like this (see the API):
$(document).ready(function(e){
$("#mycontainerdiv").on('click', 'div.info-box-holder a.close', function(e) {
e.preventDefault();
$("#characteristic").slideUp();
});
});
I am looking for the proper, simple, small code to do the following things:
Click on Element with Class Applied to it.
DIV.CLASS - Which expands and shows hidden content. (slideDown - Toggle)
DIV.CLASS - Which collapses and hides the previously show content. (slideUp - Toggle)
<div class="sitesection">
<p class="expand-one">Click Here To Display The Content <img src="images/arrow.png" width="5" height="7" /></p>
<p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
So to be vague and easy, I need to know how to get a DIV CLASS to become hidden and visible once an element on the same page has a CLASS applied to it, in which would activate and deactivate the HIDDEN and or VISIBLE HTML Content. And I need it to be hidden by default.
I have looked all over the internet and have only found very complex scripts, but nothing simple. I have found Simple Accordians... But those never close, they just open another one.
$('.expand-one').click(function(){
$('.content-one').slideToggle('slow');
});
Demo: http://jsfiddle.net/Q4PUw/2/
I was looking at this and wanted a collapsible div that was already styled for me. Then I realized what I wanted was a single pane jquery-ui accordion.
<div id="collapse">
<h3>Collapse and Expand</h3>
<div>Content</div>
</div>
<script>
$( "#collapse" ).accordion({
collapsible: true,
active: false
});
</script>
http://jsfiddle.net/MB4ch/1/
I wanted to do this with multiple divs, each with their own trigger. Building on AlienWebguy's answer above:
HTML
<div>
<p class="expand" id="expand-1">more 1...</p>
</div>
<div class="expandable" id="expandable-1">
<p>1. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
<div>
<p class="expand" id="expand-2">more 2...</p>
</div>
<div class="expandable" id="expandable-2">
<p>2. This is the content that was hidden before, but now is... Well, visible!"</p>
</div>
Javascript
$('.expand').click(function(){
target_num = $(this).attr('id').split('-')[1];
content_id = '#expandable-'.concat(target_num);
$(content_id).slideToggle('fast');
});
CSS
.expand {
font-weight: bold;
font-style: italic;
font-size: 12px;
cursor: pointer;
}
.expandable {
display:none;
}
div {
margin: 10px;
}
https://jsfiddle.net/Q4PUw/3767/
Bad idea to use accordion.
Better is to create your own collapsible block.
Example:
function InitSpoilBlock(idClicked)
{
$(idClicked).on('click', function(e){
var textArray = ['blind','slide'];//here you can add other effects
var randomEffect = textArray[Math.floor(Math.random()*textArray.length)];
$(e.target).parent().children(".HiderPanel").toggle(randomEffect);
});
}
so when you write such html:
<div class="HiderContainer">
More
<div class="HiderPanel">
Spoiled block of html
</div>
</div>
and after page load you will call
InitSpoilBlock('.Hider');
all blocks will be possible to collapse and hide with random animation. Or you can use one exact animation also.