So, I'm testing this awesome jquery plugin called freewall.js.
It seems to work absolutely fine, however, only after resizing the page.
On first load, the blocks appear too close to each other in a really messed up fashion. A little resize on the page and voilá! it's perfect.
This is the code i'm using (provided by the example file, which seems to work just fine on their server):
<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><img src='{index}.gif' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 10;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
gutterY: 15,
gutterX: 15,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
Here's the css style:
<style type="text/css">
body {
background-color: #557f9d;
font-size: 13pt;
font-family: 'Source Sans Pro', sans-serif;
font-size: 15pt;
font-weight: 300 !important;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.75em;
}
.free-wall {
margin: 0px;
}
.brick img {
margin: 0;
display: block;
}
</style>
And here's the page in question:
Example page
Thanks in advance!
Try this :
$(document).ready(function() {
$(document).resize();
});
EDIT: The code is simple, once the document is ready, it triggers the code that is bound to the resize handler, in your case the whole wall thingy is tied to it. So the first thing that the javascript do once everything is up and running is call the code and the plugin does its wonder in the back. Glad I could help.
Related
I animate a div's position, then back to it's origin with a different ease:
var anim_a = new TimelineMax().to($(".mybox"), 3, {x: 400}).stop();
var anim_b = new TimelineMax().to($(".mybox"), 1, {x: 0, ease:Bounce.easeOut}).stop();
Problem is after both the animations ran once, they wont run anymore, why? and how can I repeat them on demand?
JSFIDDLE
var anim_a = function() {
var anm = new TimelineMax().to($(".mybox"), 1, {
x: 400
}).stop();
anm.play();
}
var anim_b = function() {
var anm = new TimelineMax().to($(".mybox"), 1, {
x: 0,
ease: Bounce.easeOut
}).stop();
anm.play();
}
$(".run-a").click(function(e) {
anim_a();
});
$(".run-b").click(function(e) {
anim_b();
});
.run-a,
.run-b {
background: green;
display: inline-block;
padding: 10px;
cursor: pointer;
}
.mybox {
width: 200px;
height: 200px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<div class="run-a">Go</div>
<div class="run-b">Go back</div>
<div class="mybox"></div>
i am not used to this TimeLineMax. Still i made a small change to the code and now its working as said. Please check and confirm whether this will fit for your context. I just made anim_a and anim_b as two functions with play operation included.
I have a while loop appending spans into a div which is pagination for a slider. I have got as far as adding a class to the first child of the pagination container but I can't get my jQuery to animate the other numbers as the slider progresses. Apologies if I've described this issue awfully but I will include the code I have so far and a jsfiddle to show what's happening.
jQuery:
// Change Orbit slide numbers so that they grow on active
var getSlides = $( '.orbit-slides-container' );
var currentSlide = $('[data-orbit]').children('li');
var currentSlideID = currentSlide.attr('id');
var totalSlides = getSlides.children().length;
var growingNumber = $( '.growing-slide-number' );
var slideNumber = $( '.growing-slide-number' ).children('span').attr('id');
var step = 0;
// Function to add class os number grows.
$.fn.grow = function() {
$(this).addClass('active');
};
// Function to shrink number to original size
$.fn.growNext = function() {
$(this).removeClass('active');
$(this).next().addClass('active');
};
$('.orbit-timer').after('<div class="growing-slide-number"></div>');
// Loop through slides adding a number for each slide.
while ( step < totalSlides ) {
step++;
$('.growing-slide-number').append('<span id="slide-' + step + '">' + step + '</span>');
}
SASS:
.growing-slide-number {
#media #{$small-only} { display: none; }
bottom: 45px;
left: 25px;
font-size: rem-calc(16);
position: relative;
-webkit-transform:scale(1.0);
span {
#include single-transition();
margin-right: rem-calc(15);
color: $white;
font-weight: bold;
font-size: 16px;
}
span.active {
font-size: 32px;
}
}
Any help would be greatly appreciated :)
If you need anymore info, please don't hesitate to ask.
JSFIDDLE HERE
I want to check if server at URL is responding, then set the text of my < p > tag to 'server is online' or 'server is offline'.
I can make a page on my server that returns for ex. 'success' as a plain text. And if my javascript can catch this message it should write 'server is online', else it should try to connect for maximum 5 or more seconds, then write a message 'server is offline'.
I tried the code from this answer, but it turns offline after 1500 ms.
<body onload="Pinger_ping('google.com')">
...
<p id = "status">Checking server status...</p>
...
<script type="text/javascript">
function Pinger_ping(ip, callback) {
if(!this.inUse) {
this.inUse = true;
this.callback = callback
this.ip = ip;
var _that = this;
this.img = new Image();
var status=document.getElementById('status');
this.img.onload = function() {status.innerHTML="online";};
this.img.onerror = function() {status.innerHTML="online";};
this.start = new Date().getTime();
this.img.src = "http://" + ip;
this.timer = setTimeout(function() {status.innerHTML="offline";}, 1500);
}
}
</script>
You may try this solution, here I am using image load event to track the connection status.
(function(win) {
var _ = {};
_.win = win;
_.doc = _.win.document;
_.status = _.doc.createElement('div');
_.status.className = "hide";
_.status.innerHTML = "You are now offline !";
_.doc.getElementsByTagName('body')[0].appendChild(_.status);
_.img = new Image();
_.loop = function() {
_.win.setTimeout(_.nextSrc, 5000);
};
_.onLine = function() {
_.status.className = "hide"; // hide
_.loop();
};
_.offLine = function() {
_.status.className = "net-err"; // show
_.loop();
};
_.img.onload = _.onLine;
_.img.onerror = _.offLine;
_.nextSrc = function() {
_.img.src = "https://raw.githubusercontent.com/arvind-web-corner/offline-status/gh-pages/blank.png?" + _.win.Math.random();
};
_.loop();
})(window);
* {
font-family: Calibri, Arial !important;
}
.net-err {
width: 100%;
display: block;
z-index: 999;
padding: 15px 10px;
background: rgb(255, 9, 9);
color: #fff;
font-weight: bold !important;
text-align: center;
position: fixed;
top: -1px;
left: -1px;
border: 1px solid #ddd;
font-size: 30px;
opacity: 0.9;
filter: alpha(opacity=90);
/* IE */
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Status</title>
</head>
<body>
<h1>This page will be tracking your internet connection</h1>
<h2>You will be notified when you loose connection</h2>
<h3>e.g. Go to File > Work Offline</h3>
</body>
</html>
script, demo
I have an unordred list which acts as a chat platform. With each "message" appended to the list by the user, I have it appear with a chat bubble behind, however, the chat bubble remains the same size with every message appended, meaning that if the message contains a certain amount of characters, it appears outside of the bubble. Is there a way for a chat bubble to resize itself due to the size of the message? Preferrably after about 25 characters, I'd like the message to start a new line and the bubble to expand in height. On the other side, if a message is only 5 characters long, the chat bubble would resize to fit that.
A picture to illustrate the problm is here: http://imgur.com/uzzjpQw
Here is my Jquery/ Javascript
$('#submit').click(function(){
var message = $('#typetextbox').val();
if (message.replace(/ /g, '')){
var positions = makeNewPosition();
var el = $('<li>'+message+'</li>');
el.attr('gridpos', positions[0].toString()+"x"+positions[1].toString())
el.css('left', positions[1] * window.li_width);
el.css('top', positions[0] * window.li_height);
$('#messagebox').append(el);
setTimeout(function() {
el.fadeOut();
var gridpos = el.attr('gridpos');
delete window.grid[gridpos];
}, 4000 );
}
$("#typetextbox").val("");
});
});
window.grid = {};
window.li_height = 20;
window.li_width = 200;
function makeNewPosition(){
var h = Math.floor($(window).height()/window.li_height);
var w = Math.floor($(window).width()/window.li_width);
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
var gridpos = nh.toString() + "x" + nw.toString();
if(typeof window.grid[gridpos] == 'undefined'){
return [nh,nw];
}else{
return makeNewPosition();
}
Here's my CSS:
li{
height: 24px;
width: 220px;
margin: 2px;
padding: 5px;
position: absolute;
z-index: -2;
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
background-image: url(Images/chat-bubble-left-flick.png);
background-repeat: no-repeat;
background-position: -25px center;
}
ul{
list-style:none;
}
Sorry for providing a lot of code, but I'm not sure where my problem lies/fits. I'm assuming it's something to correct in Javascript rather than using a background image? Any help is appreciated.
height: 24px; is the reason, use min-height: 24px; instead.
Is position: absolute; required?
My code read a text file line by line and display them scroll them up inside a jquery newsTicker plugin.
The first in the beginning it's working good scrolling the lines no problems.
Somehwere in the middle more near the end it's getting mess many empty lines then many lines with only time and date.
This is the code i'm using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
<style>
.newsticker {
max-width: 620px;
margin: auto;
}
.newsticker li {
color: #4e4e4e;
background: #F2F2F2;
overflow: hidden;
height: 28px;
padding: 10px;
line-height: 30px;
list-style: none;
font-size: 20px;
text-align: left;
border-bottom: 1px dotted #2c8162;
}
.newsticker li:hover {
background: #FFF;
}
</style>
<script>
$('body').find('.newsticker').remove();//It will clear old data if its present
var file = "http://newsxpressmedia.com/files/theme/test.txt";
$.get(file, function (txt) {
//var lines = txt.responseText.split("\n");
var lines = txt.split("\n");
$ul = $('<ul class="newsticker" />');
for (var i = 0, len = lines.length; i < len; i+=3) { // step: 3
$ul.append('<li>' + lines[i] + '</li>'); //here
$ul.append('<li>' + lines[i+1] + '</li>');
}
//$ul.appendTo('body').newsTicker({
$ul.appendTo('div.wcustomhtml').newsTicker({
row_height: 48,
max_rows: 10,
speed: 600,
direction: 'up',
duration: 1000,
autostart: 1,
pauseOnHover: 1
});
});
</script>
Last changed were this:
for (var i = 0, len = lines.length; i < len; i+=3) { // step: 3
$ul.append('<li>' + lines[i] + '</li>'); //here
$ul.append('<li>' + lines[i+1] + '</li>');
}
And i changed the max_rows to 10 it was 2 but even when it was 2 somewhere sometimes it was getting mess.
You can see it on my site:
My Test Site
First in the beginning it's working a line then under it a line with date and time and they are all scrolling up.
But if you wait a bit you will see after 20-30 seconds or less that's it's getting mess lines empty some lines with date and time only.
Not sure why it happen like that when it's getting to the middle or near the end of reading the text file.
This is the complete text file content the text is in hebrew but this is the how it looks like the format:
Text File Content
The problem is that somewhere after scrolling the text the lines it's getting mess.