I have a list of paper-card and I want to know how to use the fancybox library to preview the card content of my paper-card.
Here is an example of paper-card:
<paper-card heading="Emmental"
image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
You can use fancybox with Polymer by passing the <paper-card> reference (via this.shadowRoot.querySelector() to jQuery:
firstUpdated() { // LitElement callback: element has rendered
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
<html>
<head>
<meta charset="utf-8">
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#latest/webcomponents-loader.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.2/jquery.fancybox.min.js"></script>
</head>
<body>
<!-- Works only on browsers that support Javascript modules like
Chrome, Safari, Firefox 60, Edge 17 -->
<script type="module">
import {LitElement, html} from 'https://unpkg.com/#polymer/lit-element/lit-element.js?module';
import 'https://unpkg.com/#polymer/paper-card/paper-card.js?module';
import 'https://unpkg.com/#polymer/paper-button/paper-button.js?module';
class MyElement extends LitElement {
render() {
return html`
<style>
.card {
width: 300px;
}
</style>
<paper-card class="card"
data-fancybox
data-animation-effect="false"
href="https://placehold.it/350x150/FFC107/000000"
heading="Emmental"
image="https://placehold.it/350x150/FFC107/000000" alt="Emmental">
<div class="card-content">
Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one
of the cheeses of Switzerland and is sometimes known as Swiss
cheese.
</div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>`;
}
firstUpdated() {
const card = this.shadowRoot.querySelector('.card');
$(card).fancybox();
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
</body>
</html>
Related
I don't post here often at all but only when I am stumped and I fos sure am.
I have a div tag with inside an article tag and the div tag wont extend the background held by the article tag.
The code I have is split into many different files to use jsfiddle so I'll post it here and provide screen shots of what is happening. If you guys can figure it out an explanation would be greatly appreciated.
This is a screen shot of whats happening, I want the twitter to be above the twitter widget, but it overflows under the facebook rather then extending the article background down.
This is the CSS: https://pastebin.com/y1MPG6rV
It is to many characters to paste here.
Image of whats happening on my end: https://imgur.com/a/GuUs1m4
This is the HTML:
<!-- Wrapper -->
<div id="wrapper">
<!-- About -->
<article id="about">
<h2 class="major">About.</h2>
<span class="image main"><img src="images/fbcover.jpg" alt="" /></span>
<div class="medias"><center>
<div>
<span>Facebook</span>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FDelusionsEntertainment%2F&tabs&width=340&height=180&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="300" height="180"
style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
<div class="cust">
<span>Twitter</span>
<a class="twitter-timeline" data-width="305" data-height="356" data-theme="light" href="https://twitter.com/DelusionsENT?ref_src=twsrc%5Etfw">Tweets by DelusionsENT</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</center></div>
</article>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">Delusions Entertainment™</p>
</footer>
</div>
<!-- BG -->
<div id="bg"></div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
/* Demo purposes only */
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);
</script>
</body>
</html>
Instead of fixed height you can use this:
.medias { height:auto }
I'm in traineeship in a company and I need to used the program of another trainee who programmed it in 2012. So I have done some update but I have a problem :
In the report of this trainee the web page was a column on the left with a "menu" for request, at the bottom a field for the result of request, and on all the remaining space a map with different information. For the moment the problem it's the map in region 'center' it's like in region 'top'.
Header :
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojox/grid/resources/tundraGrid.css">
<script src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>
<script>
require(["dojo/ready", "dojo/parser", "dojo/_base/xhr", "dojo/dom", "dojo/domReady!", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojox/grid/DataGrid", "dojo/store/Memory", "dojo/data/ObjectStore", "dijit/form/Select", "dijit/form/Button", "dijit/form/RadioButton", "dijit/ColorPalette", "dijit/form/TextBox", "dijit/form/SimpleTextarea", "dijit/form/MultiSelect", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dojox/gfx", "dijit/TitlePane", "dijit/form/NumberSpinner", "dojo/store/Memory", "dojo/dom-style", "dojo/query", "dojo/NodeList-dom"]);
</script>
<script src="/static/javascript/queries.js" type="text/javascript"></script>
<script src="/static/javascript/map.js" type="text/javascript"></script>
<script src="/static/javascript/utils.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?v=3&key=KEY"></script>
<link rel="stylesheet" type="text/css" href="/static/css/home.css" />
<link rel="stylesheet" type="text/css" href="/static/css/map.css" />
Body :
<body class="soria" >
<div id="mainLayout"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design: 'sidebar'">
<div id="mapLayout" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center', splitter: true"
style="height:500px;">
<div id="map"></div>
</div>
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'left', splitter: true, minSize: 330"
style="min-width: 330px">
<p>
{% include "Home/forms/formQueries.html" %}
</p>
<p id="messageLimitNumberLines" style="display: none">Le nombre de paramètres est limité à cinq. Vous ne pouvez pas en ajouter d'autres.</p>
</div>
<div id="datagridLayout" data-dojo-type="dijit/layout/ContentPane" style="min-height: 300px" data-dojo-props="region: 'bottom', splitter: true, minSize: 300">
<div id="datagrid" data-dojo-type="dojox/rid/DataGrid">
</div>
</div>
</div>
</body>
That is what I want
That is what I have
I don't know if you need another code so tell me.
If you want a pane on the left, use 'leading' for the value of region
<div id="leftLayout"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'leading', splitter: true, minSize: 330"
style="min-width: 330px">
Then in the canter region you would place a separate border container there the map is in center region and datagrid layout in bottom region.
Regions
Each child element must have an attribute “region” which
indicates where it should be positioned (most names are self
explanatory):
top
bottom
right
left
center
leading: used have flexible layout in
left-to-right/right-to-left environments. In ltr, it will be
equivalent to left, in rtl equivalent to right.
trailing: opposite of
‘leading’: right in ltr, left in rtl There can be multiple widgets for
each region, in which case their order (i.e. closeness to the edge of
the LayoutContainer) is controlled by their relative layoutPriority
settings.
There must always be one region marked ‘center’.
Source: https://dojotoolkit.org/reference-guide/1.10/dijit/layout/LayoutContainer.html#dijit-layout-layoutcontainer
I'm having a very strange problem with IE8 where the paragraph text is cropping up strange angular symbols seemingly at random. Here is a sample of the source code:
<!DOCTYPE html>
<html class="html">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="generator" content="7.1.329.244"/>
<title>Friends of Hartpury School Promises Auction 2014</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/site_global.css?4151054444"/>
<link rel="stylesheet" type="text/css" href="css/master_a-master.css?428943956"/>
<link rel="stylesheet" type="text/css" href="css/index.css?308194328" id="pagesheet"/>
<!-- Other scripts -->
<script type="text/javascript">
document.documentElement.className += ' js';
</script>
</head>
<body>
<div class="clearfix" id="page"><!-- column -->
<div class="position_content" id="page_position_content">
<div class="clearfix colelem" id="pu196"><!-- group -->
<div class="browser_width grpelem" id="u196"><!-- group -->
<div class="clearfix" id="u196_align_to_page">
<div class="clip_frame grpelem" id="u203"><!-- image -->
<img class="block" id="u203_img" src="images/friends-of.png" alt="" width="126" height="122"/>
</div>
</div>
</div>
<div class="clip_frame grpelem" id="u197"><!-- image -->
<img class="block" id="u197_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u199"><!-- image -->
<img class="block" id="u199_img" src="images/banners.png" alt="" width="214" height="64"/>
</div>
<div class="clip_frame grpelem" id="u277"><!-- image -->
<img class="block" id="u277_img" src="images/header.png" alt="" width="604" height="248"/>
</div>
</div>
<div class="clearfix colelem" id="u276-11"><!-- content -->
<p><a class="nonblock" href="index.html">THE AUCTION</a> | <a class="nonblock" href="tickets.html">TICKETS</a> | <a class="nonblock" href="rules---submit-bid.html">RULES & SUBMIT BID</a></p>
</div>
<div class="rounded-corners clearfix colelem" id="u375"><!-- group -->
<div class="clearfix grpelem" id="u376-8"><!-- content -->
<p id="u376-2">Welcome to our Promises Auction website where you can see the fabulous promises that have been donated by friends, family, local and national businesses to support our school.</p>
<p id="u376-4">A huge thank you to all our sponsors!</p>
<p id="u376-6">All funds raised will go towards our Hartpury IT 21st Century appeal. In this age of technology our server is creaking, our few laptops are old and slow and all four classes in school have access to just one central printer. We need to raise £10,000 over the school year to help purchase a new server, new laptops, upgraded interactive whiteboards and printers for each classroom. If possible we would also like to provide e-readers too.</p>
</div>
</div>
<div class="clearfix colelem" id="u526"><!-- group -->
<div class="pointer_cursor rounded-corners clearfix grpelem" id="u517"><!-- group -->
<a class="block" href="http://#"></a>
<a class="nonblock nontext clearfix grpelem" id="u520-4" href="http://#"><!-- content --><p>PROMISES SO FAR</p></a>
<a class="nonblock nontext clip_frame grpelem" id="u521" href="http://#"><!-- image --><img class="block" id="u521_img" src="images/forward.png" alt="" width="38" height="38"/></a>
</div>
</div>
<div class="clearfix colelem" id="pu527"><!-- group -->
<div class="rounded-corners clearfix grpelem" id="u527"><!-- group -->
<div class="clearfix grpelem" id="u533-11"><!-- content -->
<p id="u533-2">How to donate</p>
<p class="ts-Default-Link-Style--copy" id="u533-7">If our catalogue inspires you to donate a promise, please use this <a class="nonblock" href="rules---submit-bid.html"><span id="u533-4">donor form</span></a> and someone from the auction team will contact you.</p>
<p id="u533-9">Thank you so much for your support.</p>
</div>
</div>
<div class="rounded-corners clearfix grpelem" id="u528"><!-- group -->
<div class="clearfix grpelem" id="u529-17"><!-- content -->
<p id="u529-2">What if I can’t make the Auction?</p>
<p id="u529-4">Hopefully the catalogue will tempt you to come along to the Auction on 29th can’t make it then advance bids can be submitted by:</p>
<p class="Paragraph-Style" id="u529-8">Submitting an <a class="nonblock" href="rules---submit-bid.html"><span id="u529-6">on-line bid</span></a></p>
<p class="Paragraph-Style" id="u529-13">Completing <a class="nonblock" href="http://www.hartpuryauction.co.uk/formdownload/PreAuctionBidForm.doc"><span id="u529-10">this pre-auction bid form</span></a> and placing it in a sealed envelope addressed to FOHS Promises Auction c/o the school office.</p>
<p id="u529-15">Please read our very simple rules before submitting your bid.</p>
</div>
</div>
<div class="rounded-corners grpelem" id="u872"><!-- simple frame --></div>
<div class="rounded-corners grpelem" id="u873"><!-- simple frame --></div>
</div>
<div class="verticalspacer"></div>
<div class="browser_width colelem" id="u356"><!-- column -->
<div class="clearfix" id="u356_align_to_page">
<div class="position_content" id="u356_position_content">
<div class="clip_frame colelem" id="u362"><!-- image -->
<img class="block" id="u362_img" src="images/footer-banner.png" alt="" width="604" height="125"/>
</div>
<div class="clearfix colelem" id="u368-4"><!-- content -->
<p>Suas appareat pro eu. Te sea liber senserit maluisset, diam moderatius ea quo. Qui at purto docendi placerat, pertinax efficiendi mea ei. Adhuc fugit eloquentiam ut usu.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS includes -->
<script type="text/javascript">
if (document.location.protocol != 'https:') document.write('\x3Cscript src="http://musecdn.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script type="text/javascript">
window.jQuery || document.write('\x3Cscript src="scripts/jquery-1.8.3.min.js" type="text/javascript">\x3C/script>');
</script>
<script src="scripts/museutils.js?117816282" type="text/javascript"></script>
<script src="scripts/jquery.tobrowserwidth.js?152985095" type="text/javascript"></script>
<script src="scripts/jquery.watch.js?4199601726" type="text/javascript"></script>
<!-- Other scripts -->
<script type="text/javascript">
$(document).ready(function() { try {
Muse.Utils.transformMarkupToFixBrowserProblemsPreInit();/* body */
$('.browser_width').toBrowserWidth();/* browser width elements */
Muse.Utils.prepHyperlinks(true);/* body */
Muse.Utils.fullPage('#page');/* 100% height page */
Muse.Utils.showWidgetsWhenReady();/* body */
Muse.Utils.transformMarkupToFixBrowserProblems();/* body */
} catch(e) { Muse.Assert.fail('Error calling selector function:' + e); }});
</script>
</body>
</html>
If you copy your code and paste it into another editor (I'm using Notepad++), you will see the weird symbols in your text.
You will need to go back and erase these characters and paste it back into your website. And then when inserting new content into your site, you need to make sure the text is written in/or saved as charset=UTF-8, which is what your site specifies.
I was able to find a similar report in an Adobe post.
http://forums.adobe.com/thread/1073776
It wasn't really 'solved' but you may try deleting characters that seem like spaces and putting them back in. There could be characters that appear to be spaces to your editor (and other browsers) that are actually a different char.
i am using this code for playing music for my website way2enjoy.com .it playes all songs nicely whose source is in english language but when the source file is in other language say for example arabic it wont play. i have checked the source code using firebug it was 100% corrrect for one flash player and in other flash player it was showing arabic character as ??????????
here is my existing source code .you can see the third div which is arabic. first two will play nicely in the below link but third will not play however everything is just right.
live example http://way2enjoy.com/try/musictest/drplayer/index.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" href="drplayer.css" type="text/css" />
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="drplayer.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#playlist").playlist(
{
playerurl: "swf/drplayer.swf"
}
);
});
</script>
</head>
<body>
<div id="playlist">
<div href="29.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b></b> - Shut up and let me </div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="30.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Metallica</b> - Nothing else matters</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div>
<div href="ارجعلي.mp3" style="width: 400px;" class="item">
<div>
<div class="fr duration"></div>
<div class="btn play"></div>
<div class="title"><b>Arabic song</b> - Arabic song</div>
</div>
<div class="player inactive"></div>
</div>
</div>
Prev
Next
Pause
Play
here is link for other player i tried
http://way2enjoy.com/music/viewstory/3406
ارجعلي.mp3 is not a valid URL, that may well be your problem. If that is true, you will have to URL encode it or use a latin-only URL.
Here is an on-line URL encoder:
http://meyerweb.com/eric/tools/dencoder/
it turns the file name into
%D8%A7%D8%B1%D8%AC%D8%B9%D9%84%D9%8A.mp3
which should be displayed okay in most browsers (ie. as ارجعلي.mp3), and always work.
I have called 2nd page <div id=child> on button click of 1st page <div id = home> and used jquery theme in both pages but the problem is in 2nd page there is no theme effect as in 1st page. I have put the css file in same folder and it is giving effect in 1st page and not in 2nd ?
Can any one solve the problem, so that the theme have effect in 2nd page also? Below is my code
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
<style>
/* App custom styles */
</style>
<script src="jquerybasic/jquery.min.js" type="text/javascript">
</script>
<script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#buttonid').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#buttonchild').click(function() {
$('#child').toggle();
$('#home').toggle();
});
$('#next').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prev').click(function() {
$('#home').hide();
$('#child').show();
});
$('#nextchild').click(function() {
$('#home').show();
$('#child').hide();
});
$('#prevchild').click(function() {
$('#home').hide();
$('#child').show();
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="next" data-inline="true" data-transition="slide" >
<<
</a>
<a data-role="button" id="prev" data-inline="true" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="textinput1">
User:
</label>
<input id="textinput1" type="text" />
</fieldset>
</div>
<input id="buttonid" data-theme="d" value="Login" type="button" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 1
</h3>
</div>
</div>
<div data-role="page" id="child">
<div data-theme="d" data-role="header">
<h3>
The Grand Bhagavati
</h3>
<a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
<<
</a>
<a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
>>
</a>
</div>
<div data-role="content">
<label>
hi khushbu. welcome...!
</label>
<input id="buttonchild" data-theme="d" value="Login" type="button" class="ui-btn-hidden" aria-disabled="false" />
</div>
<div data-theme="d" data-role="footer" data-position="fixed" >
<h3>
Page 2
</h3>
</div>
</div>
<script>
//App custom javascript
</script>
</body>
Ok boy :)
It seems you've skipped a rather important part of using a new piece of software, reading the documentation.
To navigate between pages you would just place this in the href attribute for the link:
<a data-role="button" href="#child">...</a>
And jQuery Mobile will handle the transition to the next pseudo-page. Here is the documentation for Linking Pages: http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html
If you want to do this programatically then you can use $.mobile.changePage() which is what gets used internally. The advantage to manually calling this function (say in a click event handler for a button) is that you can specify non-default options for the transition:
$('#next').on('click', function () {
$.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});
Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
If you wanted to roll your own transitions it's quite a bit more complex than showing one div and hiding another. You've got to setup some CSS classes that animate the transition using CSS3 (transform, transition, keyframes, etc.).
And finally, here is a demo of your code where I replaced the links in the header with a single link that works: http://jsfiddle.net/MmKK4/