i'm trying to implement Images inside my javascript-file as Base64 Encoding but the Images will not show up in the HTML5 Animation.
So, my goal is, to only have 1 html canvas and 1 Javascript-Animation file, without further referenced Images. Right now, the Package i have consists of a html-File, a JS-file and a few PNG/JPG.
This is the HTML Code:
<body onload="init();" style="margin:0px;">
<div id="animation_container" style="background-color:transparent; width:820px; height:250px">
<canvas id="canvas" width="820" height="250" style="position: absolute; display: block; background-color:transparent;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:820px; height:250px; position: absolute; left: 0px; top: 0px; display: block;">
<div class="myClickButton" type="button" id="IAB_clicktag" ><img src="blank.png" width="100%" height="100%" onclick="clickURL();"></div>
</div>
</div>
</body>
And this is the Javascript-Part which hast the Images:
manifest: [
{src:"./background_400x800.jpg", id:"background_400x800"},
{src:"./kandidatenmin.png", id:"kandidatenmin"},
{src:"./jakob_nicolemin.png", id:"jakob_nicolemin"}
I have no Clue how to get the Base64-Code to work in this.
The HTML and JS is generated with Adobe Animate (and is about 1200lines long) to create some Animations but there is no option to automate this step.
Reason to implement those images, is, that its not possible to keep the dynamiclinks as the filepath will be changed throughout the Content Management process.
Thank you, best
M
Related
I am working on the fiddle in which I want to run a youtube video behind a draggable/resizable image in html/js(jquery).
What I want is the draggable/resizable image should remain over the top of youtube video.
The HTML and Javascript codes which I have used in order to make the draggable and resizable image are:
HTML:
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
Javascript/Jquery:
$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});
Problem Statement:
I am wondering what changes I should make in the fiddle above so that I am able to place a youtube video behind it.
This is what I have tried through CSS in fiddle but it doesn't seem to work:
#wrapper
{
background: url('https://www.youtube.com/watch?v=EtEukxu6hu0') center center no-repeat;
}
You can try this for your HTML
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/YOUR_YOUTUBE_VIDEO_ID?autoplay=1&controls=0&showinfo=0&autohide=1">
</iframe>
</div>
<div id="wrapper" style="display:inline-block">
<img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>
updated fiddle - https://jsfiddle.net/qpeehsxn/24/
I am trying to code a project where the user can add text to a template flyer and then create a pdf for print. I would like to use html elements instead of svg mostly because of ease of adding drag, resizing and word wrapping features. I then use cfdocument to create the pdf. The issue I am having is the word wrapping that is seen in the browser does not match the pdf. I also notice a border around the background image in the pdf. Does anyone know why either of these issues are happening? Thanks.
This is the browser view
This is the pdf result. The pdf also has a white border around the image.
The template is displayed via cfinclude.
<cfsavecontent variable="canvas">
<cfinclude template="templates/T080764_1.htm">
</cfsavecontent>
<cfoutput>#canvas#</cfoutput>
Template code.
<img id="t0-1-img_1" class="item ui-resizable" style="left: 0px; top: 0px; width: 816px; height: 1056px; z-index: 1;" src="http://images/template-1.jpg" unselectable="true">
<div id="ti0-text_1" style="position:absolute; left:10px; top:10px; width:450px; height:auto; text-align:left; font-family:Verdana; font-size:10pt; cursor:pointer; z-index: 2;"></div>
User clicks Add Text button and the text is added to the ti0-text_1 div with jquery.
$(function() {
$(".textbutton").click(function() {
//straight text
var txt = $("#text-field_1").html();
$("#ti0-text_1").append(txt);
});
});
The canvas data is submitted via form to a page with the cfdocument code.
<cfdocument format="pdf" filename="pdf/#form.filename#" scale="100" localurl="true" fontembed="yes" pageheight="11" pagewidth="8.50" unit="in" pagetype="custom"
margintop="0" marginleft="0" marginright="0" marginbottom="0" overwrite="yes">
<cfoutput>#form.data#</cfoutput>
</cfdocument>
I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:
http://pixelcog.github.io/parallax.js/
I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:
<div class="home-img">
<img src="/images/try.jpg" alt="">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
</div>
.home-img {
/*position: absolute;
max-width: 100%;*/
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.home-img img {
width: 100%;
position: absolute;
}
.parallax-window {
min-height: 400px;
background: transparent;
}
That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.
Does anyone have any idea what I am doing wrong?
This can be seen on my site, here:
Click here
You forgot to load the Parallax.js library,
change to line:
<script src="/path/to/parallax.js"></script>
to
<script src="/parallax.js-1.3.1/parallax.js"></script>
now the script will work.
But the "home-img" div will need to look like this:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
This way you will be able to see the effect.
If you will keep the image it will be above the effect.
EDIT
I would recommend you use the browser inspect tools.
This way you can see if all of the javascript loaded currectly.
In your case the console tab in the inspect tool showed the error:
http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)
For chrome use this tutorial:
https://developer.chrome.com/devtools
For firefox use this tutorial:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
Thanks in advance for any and all help and responses. I have a fixed div which floats at the bottom of the screen and is used as ad space for a mobile version of a website. The live version can be found here: http://www.catholiccourier.com/?mobileFormat=true . For some reason, when I try to re-size the browser window, the image inside the fixed div does not seem to shrink properly. If I resize the window abruptly the image shrinks, but it wont resize the same way as the header logo for example. Also it does not seem to stay centered. I have tried margin:0 auto; and text-align:center on the outer div, but it does not seem to work. There are some script tags inside the div as well as noscript, and I am wondering if they may be the cause of the issue.
You can see all of the code in the live website, but here is a copy of some of the code.
<div id="adSpace" align="center">
<script language="javascript" src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&IFR=False&Browser=NETSCAPE4&PageID=9311&SiteID=2&Random=1375796513537"></script>
<a href="http://catholiccourier.com/banman/a.aspx?Task=Click&ZoneID=43&CampaignID=265&AdvertiserID=79&BannerID=242&SiteID=2&RandomNumber=655331242&Keywords=" target="_Blank" class="ui-link">
<img src="http://catholiccourier.com/banman/ads/3/HOLY-SEP-REWORK_fix.gif" width="728" height="90" alt="Holy Sepulchre Cemetery 585-458-4110" align="Center" border="0">
</a>
<br>
<noscript>
<a href="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Click&Mode=HTML&SiteID=2&PageID=9311" target="_blank"> <img src="http://www.catholiccourier.com/banman/a.aspx?ZoneID=43&Task=Get&Mode=HTML&SiteID=2&PageID=9311" width="728" height="90" border="0" alt=""></a>
</noscript>
</div>
Please help and thank you.
you can use position:absolute for your div
.ui-mobile #adSpace {
position: absolute;
bottom: 0;
background-color: #e6e6e6;
width: 100%;
height: auto;
max-height: 90px;
z-index: 9999;
text-align: center;
}
I have a website and I would like it to do this: When I click on an image on the left side of the page, the page moves backward and when I click on an image on the right side, the page moves forward. I got everything set up correctly so I tried doing this simply with css, onmouseover move the margin of the page so many pixels to the right or left:
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
</div></p>
But that doesn't give me any result. So I tried using an example from w3Schools for javascript onmouseclick:
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
}
<p onmouseover="hoverForward" style="text-indent:-1000px;">
<div id="menu" style="height: 504px; width: 92px; position: absolute; z-index: 2; top: 62px; left: 1353px;">
<img src="image.jpg">
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</div></p>
I tried just putting the button on the image for the sake of testing it out. The button was there but it didn't scroll when i clicked it. What did I do wrong? It seems like the first approach I took should have definitely worked.
Thanks
Your first snippet won't work anyway, because it's not dynamic. Additionaly, text-indent isn't the best way of handling offsets for block elements. The second one can't work, because the JavaScript won't scroll, but output 'Hello, World' to the <p id="demo" ...> element.
Better have a look here:
http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
That's a nice way of vertical scrolling with the use of HTML ankers, that will even work with browsers that don't support or allow JavaScript.
May that help you?