Easy HTML Tricks for Blogging: javascript

Showing posts with label javascript. Show all posts

Using Jeasyui to Create Tooltips (2)

Custom Tooltip Style

This sample shows how to change the tooltip style.

Hover Me

the code of this page showing below

	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <h2>Custom Tooltip Style</h2>
    <p>This sample shows how to change the tooltip style.</p>
    <div style="margin:s0px 0;"></div>
    <div style="padding:10px 200px">
        <div id="pp1" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <div style="padding:10px 200px">
        <div id="pp2" class="easyui-panel" style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script> $(function(){$('#pp1').tooltip({ position: 'right', content: '<span style="color:#fff">This is the tooltip message.</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); } }); $('#pp2').tooltip({ position: 'bottom', content: '<div style="padding:5px;background:#eee;color:#000">This is the tooltip message.</div>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#fff000', borderColor: '#ff0000', boxShadow: '1px 1px 3px #292929' }); }, onPosition: function(){ $(this).tooltip('tip').css('left', $(this).offset().left); $(this).tooltip('arrow').css('left', 20); } }); }); </script>

Using Jeasyui to Make tooltips

Basic Tooltip

Hover the links to display tooltip message.

The tooltip can use each elements title attribute. Hover me to display tooltip.

Tooltip Position

Click the drop-down list below to change where the tooltip appears.

Select position:

so, this source code of this page showing below

 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
 <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
 <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

    <h2>Basic Tooltip</h2>
    <p>Hover the links to display tooltip message.</p>
    <div style="margin:20px 0;"></div>
    <p>The tooltip can use each elements title attribute.
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a> to display tooltip.
    </p>

    <h2>Tooltip Position</h2>
    <p>Click the drop-down list below to change where the tooltip appears.</p>
    <div style="margin:20px 0;"></div>
    <span>Select position:</span>
    <select onchange="changePosition(this.value)">
        <option value="bottom">Bottom</option>
        <option value="top">Top</option>
        <option value="left">Left</option>
        <option value="right">Right</option>
    </select>
    <div style="padding:10px 200px">
    <div id="pp" class="easyui-panel easyui-tooltip" title="This is the tooltip message." style="width:100px;padding:5px">Hover Me</div>
    </div>
    <script type="text/javascript">
        function changePosition(pos){
            $('#pp').tooltip({
                position: pos
            });
        }
    </script>

Spoiler with CSS and Javascript

here some tip, that i've been trying this trick form this page

Choose the web language that you have learned : This is the choice

XHTML
CSS
PHP
Back To

the css and javascript here :

<style>
#layer1 { visibility : visible; position : relative; } #layer2 { visibility : hidden; position : absolute; }
a.info { position:relative; z-index:24; background-color:#ddd; color:#000; text-decoration:none } a.info:hover {z-index:25; background-color:#ff0} a.info span{display: none} a.info:hover span { display:block; position:absolute; top:2em; left:2em; width:10em; border:1px solid #0cf; background-color:#555; color:#fff; } </style>
<script> function afficher() { document.getElementById('layer2').style.visibility ='visible';document.getElementById('layer2').style.position ='relative'; document.getElementById('layer3').style.visibility='hidden';}function fermer() { document.getElementById('layer2').style.visibility ='hidden'; document.getElementById('layer2').style.position ='absolute'; document.getElementById('layer3').style.visibility='visible'; } </script>

Using Javascript Encryption and Decryption to Hide Secret Message

How to make blogger post private?
How to encrypt blogger post?
How to create blog post with password?

First, please proceed to http://www.vincentcheung.ca/jsencryption/instructions.html.

Go to Dashboard > Design > Edit HTML.

Then add the JavaScript decryption code after the <head> tag in the HTML code of your blog. Copy and paste the following code:

Then proceed to http://www.vincentcheung.ca/jsencryption/.

You'll see this page.

form empty

Then type for secret key at the "Key" area and the secret message at the "Plain Text" area.

filled form

After doing so, hit the Encrypt button under the "Plain Text" area.

Then scroll down a little and you'll see the "HTML Code" area. Highlight, copy and paste the HTML code into your POST EDITOR.

And that's it!

Here's the result of the example shown. The secret key is "password". Go and click on it.

Show encrypted text

The DHTMLX touch JavaScript framework

The DHTMLX touch JavaScript framework is compatible with all major browsers for mobile platforms that support HTML5. DHTMLX Touch offers a complete set of frame works that allows developers to create striking and vigorous web applications for mobile and touch devices like the iPhone, iPad and Android etc.

I'm sure Javascript must hold some kind of record for the number of ways to define a function block and I'm equally sure people will argue for weeks about which style is best to use. However, what I would expect from library code (of which I include the example code) is a consistant style. I'd just got used to one style in the 'Module' code to be faced with a different one for 'AutoComplete'. Ok it's a minor thing but it's pretty irritating, if not tricky, to read a block of code with different coding styles within it.

HTML5/ javascript content, and we need to add some features to an extensive catalogue by this option.

YUI Javascript Library

This industrial strength JavaScript library was built by Yahoo! front end engineers and global contributors. Offering a scalable, fast and robust library with complete set of JavaScript, CSS utilities and controls, YUI is another free library developed under BSD license. YUI comes in handy to help developers build rich and interactive web apps using DOM scripting, DHTML and AJAX techniques.

Very nice AJAX based UI widgests are YUI - Yahoo user interface kit, very clean design, skinnable. Google has own, of course. Good web app framework (like TurboGears) simplifies AJAX/Jason interaction a lot.

One very interesting item that we discovered about the YUI Lightbox selection was that unlike the other javascript libraries, developers using the YUI library (for the most part) seem to be oblivious to the thought that other developers may have implemented lightbox functionality for the library already. This has led to an amazing lack of variety in the names of these different Lightbox Clones. I also believe that it's important to consider the very apparent differences in the composition of the community. As you noted, whereas YUI community members generally tend to be building JavaScript-heavy web applications, jQuery tends to attract a lot of designers. That difference tends to change both the essence of the questions as well as the number of questions and amount of involvement per user.

One thing that I have always loved about YUI is the very thorough documentation. Many times, I have dug through jQuery's plugin library just to find that a plugin site has been taken down... so what if I was already using that on a site? I'd be stuck or re-writing for another plugin. Not a situation you want to be in on a large site.

SPRY JavaScript Framework

SPRY is especially for those who do not consider themselves a JavaScript guru.

Any server-side technology (ColdFusion, PHP, ASP.Net, etc.) is compatible with Spry and working with it is so easy that anyone with basic web development skills can create cool, robust web apps.

The need better documentation/more examples. Their examples are enough to get you started, but advanced things will stump most users. As long as users are using IE6, developers will (have to) support it. I can't see any framework being successful when it dictates that it can't be used on one of the most popular browsers out there. Each of these sections is a different view of the same underlying data stored in the client side data model. The data model is essentially just a list of the journeys and stops that the vehicle has made.

Using this technique, adding a new interacting view of the data is trivial. You can just create a new view, bind it to the same object and it will automatically interact with the other views, highlighting the correct journeys on hover.

Mootools Javascript Framework

MooTools is a squashed, modular JavaScript frame work using the precise Object-Oriented approach helpful for the intermediate to advanced JavaScript developer. Its well documented, elegant and coherent API allows developer to write cross browse, powerful and flexible code. MooTools code undergoes with strict standard compliance and doesn’t throw any warnings. It’s extensively documented and has meaningful variable names.

Javascript is a highly under utilized programming language that is already widely available across multiple browser and mobile browser platforms.Â Currently Javascript is used for making animations, games and other minimal nuggets online. In place of using Flash on its own website, Apple has been working with a number of open scripting frameworks such as Prototype and Script.aculo.us, which mentions Apple on the front page of its website as a high profile user. Those frameworks offer prebuilt code that has been polished to work on all browsers, making it easier for the developer to concentrate on what their web page should be doing rather than repeatedly reinventing the wheel for various low level functions. In that respect, open JavaScript frameworks can replace Flash without requiring any secondary plugin runtime because they are simply open JavaScript that runs in the browser directly.

Sproutcore Web Application Development : a reference book

Write next-gen HTML5 apps using the SproutCore framework and tools
Get started right away by creating a powerful application in the very first chapter
Build your understanding of SproutCore as you follow through the most complete reference to the framework anywhere in existence

You can learn in this book

Use SproutCore’s object model to organize code into classes, subclasses, and mixins
Observe and bind properties across the code for efficient updates and error-free consistency
Structure code and separate responsibilities using client-side MVC
Define and build the user interface of extremely complex applications using SproutCore’s view library
Interact with remote data sources and model and store data in the client for immediate use
Connect an application together without messy, bug-prone controller code using SproutCore’s statechart library
Combine all of these skills in a repeatable process to create production-ready software
Test and deploy SproutCore applications

SproutCore is a framework that exists to allow developers to deliver on the promise of the Web with more than just simple attractive demos, but with complex software and remarkable user experiences. SproutCore’s creators recognized early on that developing real web software requires the same software development tools and practices that have evolved over decades in the native software field and thus SproutCore brings these to the Web.

SproutCore Web Application Development is more than just a guide to one of the largest and most powerful web application frameworks out there, it’s also a guide to writing genre defining web applications and solving the unique problems that the web platform creates. Containing the results of thousands of hours of software development experience, this book is invaluable for anyone already writing software for the Web or just starting out.

SproutCore Web Application Development comprises of three sections. In the first section we introduce SproutCore and walk through a simple SproutCore application. From there, we look in detail at all of the main components of the framework before finally working through a rigorous real-world example from start to finish. Learning about SproutCore means learning about writing software for the Web. In this book, you will not only learn what sets SproutCore apart from other web libraries and frameworks, you will also learn about solving the difficult challenges that web development poses. We will look at all the components of an application and how to translate wireframes, mocks, and design descriptions into clean, efficient, and maintainable code using MVC, data adaptors, statecharts, and more. We will look at SproutCore’s powerful binding and observing and watch how changes propagate across our app effortlessly and magically with very little code.

By the time you complete SproutCore Web Application Development, you’ll be ready to develop your own application that redefines what it means to be a web application.

A Brief Story about Sproutcore

SproutCore is a great example of an open source framework for building mind boggling and innovative web apps that create a great user experience. Using the power of HTML5 to leverage the latest web technologies, SproutCore is also compatible with all browsers.

SproutCore Web Application Development is more than just a guide to one of the largest and most powerful web application frameworks out there, it's also a guide to writing genre defining web applications and solving the unique problems that the web platform creates. Containing the results of thousands of hours of software development experience, this book is invaluable for anyone already writing software for the Web or just starting out.

Javascript Host Script Tips

Blogger does not provide file hosting, (except for photos and videos, in Picasaweb). This poses problem if you want to add a widget or a feature that uses Javascript. Where do you put the scripts then?

Below are some of the options you have when adding Javascripts to your Blogger or blogspot blog.

1. Put it in a widget

If the script is small and used only for that particular widget then this is the preferred method. Just put the script in an HTML/Javascript gadget/widget together with the rest of the widget codes, like this:

1<script type='text/javascript'>
2put javascript code in here
3</script>

Most of my hacks use this method. I like this method because it’s easier to install, uninstall and you don’t need to mess with your template code.

2. Put it in the template itself

Use this method if the script is accessed from outside of a widget or from more than one places in your template. Do it like this:

1<script type='text/javascript'>
2//<![CDATA[
3put javascript code here
4//]]>
5</script>

Then place the whole thing before the </head> tag in your template.

3. Host the javascript file externally (outside of Blogger server)

To be specific use Google Sites. Why Google Sites? Because it’s free first and foremost (that’s why you join Blogger in the first place right?) and it’s a part of Google big family, so you don’t have to sign up or anything.

But Google Sites, like most free host doesn’t accept javascripts. Luckily there is a workaround -change the javascript file into a text file, by changing the file extension from .js to .txt.

Note: The external script must not contain the <script type='text/javascript'></script> tags.

After uploading the file to Google Sites, get the direct link to the file and use it in the code below (notice the .txt file extension).

`1`	`<script` `src='filename.txt'` `type="text/javascript'/>`

The direct link to the file will begin with https. To make it work, you need to change https to http when adding to the code, like in this example:

1<script src='http://sites.google.com/site/bloggersentral/file-storage/shBrushXml.txt' type='text/javascript'/>

This code must be positioned exactly where you would want the script to be in your template.

Copy fron Original Source : http://www.bloggersentral.com/2010/03/where-to-host-javascript-for-blogspot.html