Programatori.info » WEB 2.0

Toggle Text

Web Design CLuj — Mon, 20 Jun 2011 01:32:57 +0000

Let's say you have a link to show more options which expands a list of options. It's says "more options". It's easy to toggle those options with .toggle() or .slideToggle(), but the text remains the same. To toggle the text too...

$("#more-less-options-button").click(function() {
var txt = $("#extra-options").is(':visible') ? 'more options' : 'less options';
$("#more-less-options-button").text(txt);
$("#extra-options").slideToggle();
});

Advertise here with BSA

Display Image Next To Each Tag

Web Design CLuj — Sun, 19 Jun 2011 18:46:50 +0000

<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL// Check tagslug.png exists and display it
if ($posttags) {
foreach($posttags as $tag) {
$image = "/images/tag-images/$tag->slug.png";if (file_exists("images/tag-images/$tag->slug.png")) {
echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '" /></a>';// If no image found, output something else, possibly nothing.
} else {
echo '<p>Not found</p>';
}

…

Advertise here with BSA

Display Image Next To Each Tag

Web Design CLuj — Sun, 19 Jun 2011 18:46:50 +0000

<?php
$posttags = get_the_tags(); // Get articles tags
$home = get_bloginfo('url'); // Get homepage URL// Check tagslug.png exists and display it
if ($posttags) {
foreach($posttags as $tag) {
$image = "/images/tag-images/$tag->slug.png";if (file_exists("images/tag-images/$tag->slug.png")) {
echo '<a href="' . $home . '/tag/' . $tag->slug . '" /><img title="' . $tag->name . '" alt="' . $tag->name . '" src="' . $image . '" /></a>';// If no image found, output something else, possibly nothing.
} else {
echo '<p>Not found</p>';
}

…

Advertise here with BSA

Calculate Distance Between Mouse and Element

Web Design CLuj — Sun, 19 Jun 2011 18:37:36 +0000

(function() {var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});})();

This code will calculate the distance between the mouse cursor and the center of an element. This can be useful for triggering a function when the mouse is within a certain distance of an element.…

Advertise here with BSA

Calculate Distance Between Mouse and Element

Web Design CLuj — Sun, 19 Jun 2011 18:37:36 +0000

(function() {var mX, mY, distance,
$distance = $('#distance span'),
$element = $('#element');function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}$(document).mousemove(function(e) {
mX = e.pageX;
mY = e.pageY;
distance = calculateDistance($element, mX, mY);
$distance.text(distance);
});})();

This code will calculate the distance between the mouse cursor and the center of an element. This can be useful for triggering a function when the mouse is within a certain distance of an element.…

Advertise here with BSA

Hexagon With Shadow

Web Design CLuj — Sat, 18 Jun 2011 00:34:27 +0000

<div class="hexagon"><span></span></div>

.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon, .hexagon:before, .hexagon:after {
background: red;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
left: 22px;
width: 57px;
height: 57px;
-moz-transform: rotate(145deg) skew(22.5deg);
-webkit-transform: rotate(145deg) skew(22.5deg);
transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
top: -29px;
}
.hexagon:after {
top: 27px;
}
.hexagon span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:red;

…

Advertise here with BSA

Diagonal Graph Paper Gradient

Web Design CLuj — Fri, 17 Jun 2011 23:10:18 +0000

#example-gradient { height: 200px; margin: 0 0 20px 0; background-color: #eaeaea; background-size: 20px 20px; background-image: -webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: -moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: -o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), -o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px); background-image: repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px), repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
}

Example

Based on original code from Christopher Burton.

Make jQuery :contains Case-Insensitive

Web Design CLuj — Tue, 14 Jun 2011 20:01:28 +0000

jQuery.expr[':'].Contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};

With this in place,

$("div:contains('John')")

would select all three of these elements:

<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>

Demo via Pablo Fortes.

Advertise here with BSA

Code injection, error throwing

Web Design CLuj — Sat, 11 Jun 2011 03:01:12 +0000

In a blog, Opera Software Developer Relations team member Tiffany B. Brown looks at code injection, error throwing and handling and mobile debugging. She notes Opera Dragonfly and its remote debug features provide a way to debug mobile sites from their desktop. Brown mentions WebKit’s recently added remote debugging capabilities, folded into Google Chrome developer tools. Pointed to as well are Bugaboo, an iOS app for Safari-based debugging; JS Console which is available on the Web or as an iOS app; and Weinre for WebKit-based browsers. In this entry, Brown looks more closely at Dragonfly remote debug and JSConsole.

The State – Sort of – of HTML5 Audio

Web Design CLuj — Fri, 10 Jun 2011 02:17:34 +0000

The State – Sort of – of HTML5 Audio

Scott Schiller discusses the high level of hype around HTML5 and CSS3. The two specs render ”many years of feature hacks redundant by replacing them with native features,” he writes in an insightful blog.

Blogging, he says:

CSS3’s border-radius, box-shadow, text-shadow and gradients, and HTML5’s

He begs the question: Are we going to see a common format across the major browsers for both audio and video?

Check it out!