Using AUI carousel in liferay DXP (v 3.0).
Liferay DXP uses AUI version 3.0
on each image it has redirect to different url.
For following demo code redirection is not working
<html>
<head>
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css"
rel="stylesheet"></link>
<script>
YUI().use(
'aui-carousel',
function(Y) {
new Y.Carousel(
{
activeIndex: 'rand',
contentBox: '#myCarousel',
height: 250,
intervalTime: 2,
width: 700
}
).render();
}
);
</script>
</head>
<body>
<div id="myCarousel">
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/2.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/3.jpg);"></div>
<div class="image-viewer-base-image" style="background: url(http://alloyui.com/carousel/img/4.jpg);"></div>
</div>
</body>
</html>
Any solution ??
That strategy works in AlloyUI 2.0.0, so it seems like this is a bug in AlloyUI 3.0.0.
One possible workaround for this bug would be to select all the <img> tag children of your carousel and wrap them with the appropriate <a> tag programmatically:
Y.all('#myCarousel img').each(function(img) {
var imgParent = img.parent;
var link = document.createElement('a');
link.href = 'http://www.google.com';
imgParent.replaceChild(link, img);
link.appendChild(img);
});
Related
I am trying to add SVG controls in a Bootstrap Grid using Javascript. I am able to add the SVG using Javascript, but the scaling/resize of the page does not behave as if it would have been built with static HTML.
When clicking on the "Add Page" button, a new set of SVG controls are added to a Bootstrap Grid. The SVG controls are not scaling. The row does not expand.
If I build the same page using static HTML, the SVG controls scale as expected. What am I doing wrong? Why the SVG controls added at runtime using Javascript do not scale as expected?
Thank you for the help!
Codepen
Working Example (Static HTML)
Not working (Javascript)
HTML
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
html {
overflow-y: scroll;
}
</style>
</head>
<body style="background-color: #e6e6e6">
<div id="editor-fluid" class="container">
<div class="row">
<div class=".col-sm-12">
<button id="add-page">Add Page</button>
</div>
</div>
<div class="row">
<div id="page-container-0" class="col-sm-6">
</div>
<div id="page-container-1" class="col-sm-6">
</div>
</div>
<div class="row">
<div id="page-container-2" class="col-sm-6">
</div>
<div id="page-container-3" class="col-sm-6">
</div>
</div>
</div>
<!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<script src="app.js"></script>
</body>
</html>
Javascript
var Startup = (function () {
function Startup() {
}
Startup.main = function () {
var pageNumber = 0;
var addPageButton = document.getElementById('add-page');
addPageButton.addEventListener('click', function () {
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.id = "page-" + pageNumber;
svg.setAttribute('viewbox', "0 0 816 1056");
svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
var container = document.getElementById('page-container-' + pageNumber++);
container.appendChild(svg);
var page = Snap(svg);
var pageBackground = page.rect(0, 0, 816, 1056);
pageBackground.attr({
fill: 'white',
stroke: 'gray',
strokeWidth: 2,
});
var text = page.text(96, 100, "Hello World");
text.attr({
'font-size': 100,
});
});
return 0;
};
return Startup;
}());
Startup.main();
SVG is case sensitive so the attribute viewBox cannot be written as viewbox when you call setAttribute. You want this...
svg.setAttribute('viewBox', "0 0 816 1056");
When you misspell it in markup the parser is clever enough to fix it for you which is why that works.
Since you are adding SVG content after document is completely loaded. I would suggest you to use add CSS property for svg
svg{
width:100%;
height:100%;
}
This should scale to full 100% of width. For the height, I would recommend to add style using javascript
I am trying to convert an html page to PDF which contains images and some data-tables which as designed using css styles.
I have tried JSPDF and html2canvas libraries but the images don't show up in PDF and also they don't allow me to create PDF on long pages as my html is dynamic and it could grow into four pages.
I have searched so many forum's online but unable to find anything which resolves my issue.
The site in which i am implementing is shopify site. So any clue with this reference might help.
Any sort of help will be highly thankful.
Thanks
check at this link if it can be usefull for you on codepen
https://codepen.io/massimo-cassandro/pen/qOrJNx
<html>
<!-- donot consider this i put it just to allow the link-->
<html/>
Transform the content of your html into image and then transform it into PDF :
https://html2canvas.hertzen.com/
https://parall.ax/products/jspdf
var doc = new jsPDF();
var specialElementHandlers = {
'': function (element, renderer) {
return true;
}
};
$('#btn-download').click(function () {
html2canvas($('#container').html).then(function (canvas) { DownloadPDF(canvas) });
});
function DownloadPDF(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10, parseInt($(canvas).attr('width')) / 9, parseInt($(canvas).attr('height')) / 9);
doc.save('name.pdf');
}
#test
{
width: 500px;
height : 500px;
background-image: url("https://www.wikichat.fr/wp-content/uploads/sites/2/comment-soigner-une-plaie-dun-chat.jpg");
background-size: contain;
background-repeat: no-repeat;
}
#btn-download
{
cursor:pointer;
position:fixed;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="btn-download">Download</div>
<br/>
<div id="container">
<div id="test">
</div>
</div>
</body>
</html>
I'm a beginner in android so please excuse me if my question is foolish.
I want to implement turn.js library in android webview for showing book.As I read about WebView it can run javascript so I wonder is there anyway to use turn.js in android. I've referred this link turn.js website
JS code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>
Firstly you have to load web-page with script to WebView.
I used Monocle lib to show books so I placed html, js and css files into assets folder
Here is my mono.html
You are using turn.js library so you may find sample web page at library samples.
<head>
<!-- Include the Monocle library and styles -->
<script src="scripts/monocore.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monocore.css" />
<script src="scripts/monoctrl.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monoctrl.css" />
<style>
#reader { width: 100%; height: 100%;}
</style>
<script>
function createBookTitle(reader, contactListeners) {
var bt = {}
bt.createControlElements = function () {
cntr = document.createElement('div');
cntr.className = "bookTitle";
runner = document.createElement('div');
runner.className = "runner";
runner.innerHTML = reader.getBook().getMetaData('title');
cntr.appendChild(runner);
if (contactListeners) {
Monocle.Events.listenForContact(cntr, contactListeners);
}
return cntr;
}
reader.addControl(bt, 'page');
return bt;
}
</script>
</head>
<body>
<div id="reader"></div>
<script type="text/javascript">
Monocle.Events.listen(
window,
'load',
function () {
var readerOptions = {
panels: Monocle.Panels.Magic
};
Monocle.Reader('reader', bookData, readerOptions, function (rdr)
{
window.reader5 = rdr;
var toc = Monocle.Controls.Contents(rdr);
rdr.addControl(toc, 'popover', { hidden: true });
createBookTitle(
rdr,
{
start: function () {
rdr.showControl(toc);
}
}
);
});
}
);
</script>
</body>
After that you may show this page at web view like that
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/html/mono.html");
and the last step is load book content into this page. I wrote a helper that transforms book file to JS book object https://github.com/joseph/Monocle/wiki/Book-data-object with "javascript:" prefix. So it looks like "javascript: var bookData = {...."
and load this script
webView.loadUrl(bookData);
So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/
I am new in jquery. my task in jquery is "ImgAreaSelect"
I am trying this from morning but not achive the goal. please review my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/
jQuery is just the Core and does not include an image area select method
After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });
This is an example http://jsfiddle.net/8TwRJ/
I also face this problem.I made some changes in Css and Bingo,It is resolved.
Actully the parent div position should be relative to make imagearea scrollable.
You has to define the "parent:"imgParentDivID"" and set position:relative of that div.
It will work perfectly.
Code:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
I hope this will help you.
you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
instead of
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
this will solve the issue without any further changes.