I'm using Arctext to curve some text on my web page.
However I have a problem.
When I link to the page the first time the curve is just seen slightly like below
When I reload the page however the curve comes properly as seen in this image
That's the HTML :
<div class='row'>
<div class='columns '>
<hr class='songtitlehr'>
<p class='sotd'>SONG OF THE DAY</p>
<p class='songtitle'>SOTD</p>
<p class='songartist '>BY CARL SALDANHA</p>
<p class='sotd2'>SONG OF THE DAY</p>
<hr class='songtitlehr'>
</div>
</div>
That's the JS
$(document).ready(function(){
$('.sotd').arctext({radius:240});
$('.sotd2').arctext({radius:240, dir:-1});
});
Related
I have a project to build which contains 14 columns across the page, those columns will have dropbox where user are allow to drag and drop pdf files, once use drag and drop a pdf file to the first column a line across all columns will appear to indicate that the user can proceed droping the same file forward in the same line. if another new pdf file is dragged it will go under the previous one. This means that there will be a lot of files throughout all columns, column 1 might have 3 files columns 7 might have 10. At the moment I'm doing the dropboxes using div but i dont think that is very dynamic because I could have between 1 to 10,000 files, does that means I would have to create 10,000 div with different position? I believe there must be a better way to do this as I need this to be more dynamic. And if it becomes dynamic data, how would I save the data information (position of file location) so next time I visit the page the information will be allocated in the same position? (I believe that would require php but i didnt get to that part yet).
This code does not contain all divs, it contains 4 columns each columns has 1 dropbox inside at the moment, but that number will be much higher which is why I think this dropbox should be dynamic. I have not include the css neither the javascript files. As I figured its irrelevant. if any of you want to see it I will post it.
HTML
<div class="columnContent">
<p>Customer's order</p>
<div class="dropBox" ondrop="drag_drop(event)"
ondragover="allowDrop(event)" ondragstart=
"dragInfo(event)" id="dp1" draggable="true">
<p id="para1">Drag file here</p>
<div class="leftAlign">
<img src="pdf.jpg" id="pdfImg" style="visibility: hidden">
<p1 id="pdfInfo"></p1><br>
</div>
<input id="txt1" placeholder="Customer's code" style="visibility:
hidden"><br>
<input id="txt2" placeholder="Customer's size" style="visibility:
hidden"><br>
<input id="txt3" placeholder="Customer's DD" style="visibility:
hidden"><br>
<button id="btn" style="visibility: hidden">Save</button>
</div>
</div>
<div class="columnContent">
<p>Planned</p>
<div class="dropBox" ondrop="drop(event)"ondragover="allowDrop(event)" >
####(I think these boxes should be dynamic or I
will have to create 100s of them)#####
<p ondragstart="dragInfo(event)" draggable="true">Drag file here</p>
</div>
</div>
<div class="columnContent" >
<p>Checked</p>
<div class="dropBox" ondrop="drop(event)"ondragover="allowDrop(event)"
style="visibility: hidden"> ###(I think these
boxes should be dynamic or I will have to create 100s of them)###
<p ondragstart="dragInfo(event)" draggable="true">Drag file here</p>
</div>
</div>
<div class="columnContent">
<p>Coil # I.S</p>
<div class="dropBox" ondrop="drop(event)"
ondragover="allowDrop(event)"
style="visibility: hidden"> ####(I think these boxes should
be dynamic or I will have to create 100s of them)####
<p ondragstart="dragInfo(event)" draggable="true">Drag file
here</p>
</div>
</div>
I think you are after Jquery UI. This will simplify the whole process much better and can be seen at http://jqueryui.com/droppable/ or http://jqueryui.com/sortable/. I didn't use to like jquery but make the move and I don't think you'll ever regret it (if you don't use it already).
I'm trying to use Affectiva's Web SDK (Javascript) to detect emotions via a Camera Stream. I tried using it in JS Fiddle. It works fine but when I got the code from JSFiddle and used in on my Java Web Project in Eclipse, the Web Camera prompt isn't showing up. Nor can it access the Web Cam. Here's the code:
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-8" id="affdex_elements" style="width:680px;height:480px;"></div>
<div class="col-md-4">
<div style="height:25em;">
<strong>EMOTION TRACKING RESULTS</strong>
<div id="results" style="word-wrap:break-word;"></div>
</div>
<div>
<strong>DETECTOR LOG MSGS</strong>
</div>
<div id="logs"></div>
</div>
</div>
<div>
<button id="start" onclick="onStart()">Start</button>
<button id="stop" onclick="onStop()">Stop</button>
<button id="reset" onclick="onReset()">Reset</button>
<h3>Affectiva JS SDK CameraDetector to track different emotions.</h3>
<p>
<strong>Instructions</strong>
</br>
Press the start button to start the detector.
<br/> When a face is detected, the probabilities of the different emotions are written to the DOM.
<br/> Press the stop button to end the detector.
</p>
</div>
</div>
</body>
The Javascript file is similar to the contents in https://jsfiddle.net/affectiva/opyh5e8d/show/
I copied the code but the camera doesn't work on my end when I used it on Eclipse. I'm using Chrome as my browser.
I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.
You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}
I have been creating a display for a coffee ordering system. The display shows 10 orders, but The screen size can be changed. I used this jQuery plugin textFill, and call it on a callback when the new orders are pulled in. For some reason, if my span tag, (or in my case p tag), contains a string without a space in, the text will appear a lot bigger than other "orders". I got round this by making sure there is a space included in the order string, but I'd still like to understand what was causing the problem.
Here is some example html of the order screen...
<div id="twitterSearch" class="tweets">
<div class="tweet">
<p class="text" >Cappuccino.................................MrTest</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino....................................Bob</p>
</div>
<div class="tweet">
<p class="text" >Latte ....................................... Harry</p>
</div>
<div class="tweet">
<p class="text" >Black Americano ..................... Tanya</p>
</div>
<div class="tweet">
<p class="text" >Black Americano ................. Yogi</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino .................................. Paul</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino ................................... Tilda</p>
</div>
<div class="tweet">
<p class="text" >Cappuccino ................................ Sam</p>
</div>
<div class="tweet">
<p class="text" >Latte ....................................... Ryan</p>
</div>
In the above example, the first two tweets would have a much larger text size.
I tried to debug the plugin, but couldn't seem to get back a reported width change of the selected element during the changing of font size.
I haven’t really looked at the textFill plugin, but isn’t it just a question of it suddenly being able to wrap the text if there’s a space in it; and that the shrinking of wrapped text stops earlier because the maximum height is exceeded?
I am implementing sliding panel element but problem is when i slide out other div element is floating down.
I guess and tried to give z-index to element which i am sliding but it doesn't seems to work.
Let me put code for both div.
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
This is div which i am sliding in and out and beneath is code of effective div.
<div class="askform">
<p class="titletext">Ask an Expert Trade Forum</p>
<p class="detailtext">WD-40’s leading source for DIY tips and tricks.</p>
<span>
<form id="askform" name="askform" action="" method="post">
<span class="left"><input name="input" type="text" class="askinputbox"/></span><span class="marginleft"><input type="image" src="images/search_icon.gif" /></span>
</form>
</span>
<div class="followus">
<span class="followtext">Follow us on</span><span class="right"><img src="images/bookmark.jpg" width="121" height="45" alt="Bookmark" /></span>
</div>
</div>
Sliding div is in left portion of the page and effective div is in right portion of the page.
I guess something with z-index, positioning element and overflow properties will do something.
For starters, this block of HTML is malformed:
<div class="vrcontrol">
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
Where' the closing </div> for this div?
<div class="slide-out-div">
Also, without the accompanying CSS, it's hard to determine whether that is the problem as well.