I have a hero transition sitting within a polymer element. The documentation states that the transition will work for up to 1 level of shadow root. (https://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages). However, it doesn't work.
If I move the element outside of the shadow dom, it works as expected.
<polymer-element name="x-el" noscript>
<template>
<div hero-id="hero-test" hero> GO HERO </div>
</template>
</polymer-element>
<core-animated-pages transitions="hero-transition cross-fade">
<section>
// works
<div hero-id="hero-test" hero> GO HERO </div>
// doesn't work
<x-el></x-el>
</section>
<section>
<div hero-id="hero-test" hero> YAY </div>
</section>
</core-animated-pages>
Live demo: http://codepen.io/nicolasrannou/pen/zxNYMw
Am I missing something?
Thanks
Just remove "section" outside your custom element then it's gonna work!
<!--<section>-->
<x-el onclick="stuff(1);"></x-el>
<!--</section>-->
Check this: http://codepen.io/anon/pen/yygydK
Goodluck
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I have added a paragraph in the slider.
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
The paragraph is display on top of the image.The slider works fine after finishing loading the whole page. However, when the page is loading, I can see all of the paragraph for each slide show in the same time. I only want it shows the first slide paragraph when loading. Can anyone please help?
You can display only one slide and hide all other slides (by specifying style="display: none;") at the beginning.
<div u="slides" ...>
<div>
<a>
<img src="image.jpg"/>
<p>Some texts</p>
</a>
<div>
<div style="display: none;">
...
<div>
</div>
Or you can use jssor slider no-jquery version, it will initialize jssor slider immediately without waiting for page load.
I am using the jssor templete for my slider and I have modified the setting so that I can have a slider image change when the mouse hover on the thumbnail. But I do not know how to add an external link to the thumbnail image so that I can go to the another page associated with that picture
I have try the following method from http://quabr.com/28478806/jssor-external-links-on-thumbnails but it is not worked
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Thank you for your help!
I guess it worked already.
But there is an extra enclosing '<div>' in following code,
<div>
<img u="image" src="../img/photography/002.jpg" />
<div u="thumb">
<img class="i" src="../img/photography/thumb-002.jpg"/>
</div>
<div u="caption" t="L">My Title</div>
</div>
</div>
Please remove it by replacing
<div u="caption" t="L">My Title</div>
</div>
with
<div u="caption" t="L">My Title</div>
Also, please set 'height: 100%' for 'a' element to make the clickable area bigger.
<a href="http://mylink.com" target="_blank" style="height: 100%;">
And finally, please check out the thumbnail navigator skin html code, because it is fully customizable, and it can be very complicated. Please make sure your link element is not covered by any other element.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I have this type of element:
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="">
</a>
</div>
I want to be able to:
Drag the whole div, even if I click on the /anchorimage (before dragging).
Still respond normally to an anchor/image click (without a drag).
Right now, only the image is dragged when I click on it.
Here's a fiddle: http://jsfiddle.net/M5tBd/
As per the HTML5 Editor's Draft spec, Images and Anchors with a href element are both elements that are, by default draggable. Your anchor is probably capturing the dragstart event, preventing the div from ever getting it. Try setting draggable="false" on your <img> and <a> elements.
<div draggable="true" id="item" style="margin:20px;background:red;height:400px;width:400px;">
<a href="#" target="_blank" draggable="false">
<img style="margin:40px;" src="http://www.placekitten.com/100/100" alt="" draggable="false">
</a>
Your fiddle doesn't even work dragging the img element for me in Chrome under Ubuntu, so you may have other issues besides this.