HTML JavaScript How can I create this Form? - javascript

I came across a really nice looking form while using RapidShare and I was curious as to how they made it. If you look HERE and click on "Eliminate annoying waiting with RapidPro!" a menu / form will appear. I am using Intuit to design my webpage and I was curious whether or not this was actually a form that is appearing in front of me.
As a possible side question - Is there an easy way to make a nice looking table with checkboxes in it similar to the one displayed by RapidShare? I really like this method for comparing and contrasting two different plans.
Thank you for reading,
Evan

Yes, the contents of that "popup" is a plain HTML table with some css to make it fancier. All they are doing is using Javascript to animate a div to popup into the center of the screen, and using css to style it nicely. They seem to have a custom solution that doesn't use jQuery, but there are many framework plugins that do the same:
Lightbox for prototype.js
Lightbox for jQuery
Fancybox or jQuery
Colorbox for jQuery
There are others too.

Look for fancybox in jQuery
Shadowbox
Greybox
You can load a page in a popup style like this and for the table, yeah you can create a comparasion table. Look are they source code and it will be easier for you to replicate.

See nyroModal in Jquery, you can see lightbox examples for HTML forms and image gallery.
Download the bundle from: http://nyromodal.nyrodev.com/create.php?dl=1 and create a file and include these codes
**index.html**
<script SRC="jquery.tools.min.js"></script>
<link rel="stylesheet" href="nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.nyroModal.custom.js"></script>
<script type="text/javascript" src="jquery.nyroModal-ie6.js"></script>
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
<a class="nyroModal" href="test.html"> Light Box view</a>
----------------------------------------------------------------------------------------
**test.html**
<form>
<label> name </label><input type="text" name="testname" />
</form>

Related

Loading external javascript not working, trying to animate HTML elements with Textillate

Some of you may be familiar with Textillate. ( https://jschr.github.io/textillate/ ) On the website, it says to fully implement the animations, I have to make sure I include JQuery, animate.css ( http://daneden.github.io/animate.css/ ) and lettering.js (https://github.com/davatron5000/Lettering.js). Ofcourse, I also have to implement the textillate.js file.
For some reason, I'm not able to get this working, I think I'm making a mistake with loading in the javascript or JQuery files. Sadly, the console doesn't display any errors, so it's a bit strange..
My code to make it work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<link rel="stylesheet" href="animate.css"/>
<h1 class="tlt" data-in-effect="rollIn">This should have a rollIn effect</h1>
It should be a very simple css animation. If anyone of you would be interested, you can view a live-demo here: http://codepen.io/jschr/pen/GaJCi.
Here is a small tutorial to use Textillate: https://github.com/jschr/textillate.
As you can see on the link above, the usage should be very basic and I don't see what I'm doing wrong.
The first two scripts depend on jQuery, but you don't try to load jQuery until after them.
You need to load dependancies of a script before you load the script that depends on them.
Change the order of your <script> elements.

jQuery Mobile bad behaviour

I'm trying to use the jQuery Mobile swipe feature but I'm experiencing a little problem when I include this:
http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js
and this:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
The issue is a "Loading" text in the bottom of the page that is shown when i load the Mobile library.
Who knows why is it shown? I have the problem with both Chrome/Chromium and Firefox browsers.
You can take a look to my code here:
http://jsfiddle.net/rfringuello89/yLGKT/
as you can see I used 3 not draggable but swipeable <div></div>
Thanks guys
You need to include the appropriate css for jQuery Mobile too, that should do the trick.
Edit: check this fiddle, I included the css and it works fine.
This is the right way to include the libraries:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
according to the docs.
Edit2: according to this answer by eivers88 you can use the following code to stop jQuery Mobile from initialising the page on DOM-Ready (without the need to include the css dependency):
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend( $.mobile , {autoInitializePage: false})});</script>

Is it possible to hide include part in view source of html

I have searched many on this forum to hide some information in view source like script include and css, I didn't find any working solution
this is what I am doing in my php script
<html>
<head><?php include('mylibrary/my_include.php');?></head>
<body>
<div></div>
</body>
</html>
in view source I am getting like this
<html>
<head>
<!-- My function -->
<script type='text/javascript' src='Library/My_fun.js'></script>
<!-- Index -->
<link type="text/css" rel="stylesheet" href="Index/Index.css" />
<link type="text/css" rel="stylesheet" href="JS/jquery-ui.css" />
</head>
<body>
<div></div>
</body>
</html>
I would like to hide js and css in view source which are in 'mylibrary/my_include.php', Is it possible to do so ? or any alternate solution displaying only following in viewsource or any other
<head><?php include('mylibrary/my_include.php');?></head>
No.
You can't give something to the browser without giving it to the user. The user controls the browser, you do not.
I would like to hide js and css in view source which are in
'mylibrary/my_include.php', Is it possible to do so ? or any alternate
solution displaying only following in viewsource or any other
No, it is impossible to render your page without these references due to the fact using these references, the web browser knows from where to download, parse and load your resources (css, js).
But:
You can obscure/compress/minify your JS & CSS files in such a way that it would be very hard for the users to identify it correctly.
UPDATE:
Per the OP request, here is how to compress resource files:
http://refresh-sf.com/yui/
This is not possible. The browser needs to see it. Thus, the user is able to see it too.
There are methods you could use like obfuscating, disabling right clicks, etc., but these only work to prevent a small number of users from viewing it.
You can not hide the source html / javascript as they are run on client. You can obfuscate at max still one would be able to get to the source.
Yo'll have to switch to some kind of compiled application, like one in C++ instead of web application if you want to avoid people reading your sources.

jQuery conflict between a lightbox function and masonry/endless scroll

I wanted to create a lightbox effect for images when clicked, so eventually I found this tutorial and followed all the necessary steps to insert it into my page (with a little modification).
The lightbox functions exactly the way I want it to, but the jQuery library used for the lightbox is conflicting with another script and it's messing up the multi-column layout and endless scroll.
This is a mock page with the lightbox effect. Normally, all the posts should be scattered in a lose multi-column fashion and new posts should load with endless scroll.
I tried deleting a bunch of things to see where the conflict was, and these are the two scripts that conflict.
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
jQuery needs to be the first script you include.
jQuery Masonry extends jQuery so you must reference the jQuery library first.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/twte3d7/4Wjm5wj58/disassemble_v3.js"></script>
I see multiple IDs on divs containing images
<div id="post">
<img src="">
</div>
what if you put class instead of id?
And could you provide an example of your masonry implementation?
Thanks

How do I move a Javascript phrase (within the body) into the head instead

For example I have a code that drags in my twitter feed via a javascript file, I have pasted the links directly in the div I wish for it to appear however my page won't validate (obviously) but I can't figure out how to send it to appear in that div with the Javascript code hidden in the header.
Below shows the div I need the information in and the javascript files that call the information
Any help would be greatly appreciated !
<div id="twitter_update_list"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong></div>
The only reason that I can see for that not to validate is that the ampersands in the URI haven't been HTML encoded (i.e. as &).
<script> elements are allowed as child elements of <div> elements.
If you're using the JavaScript provided by Twitter then I don't think you can.
What you're after (if I understand correctly) is an external JavaScript file that you link to in the <head> of your page, that traverses the DOM on page-load, finds a div with an ID of "twitter_update_list" and inserts the content from Twitter.
While this functionality is quite easy to code, it would have to be within the JavaScript file itself. Since you're using Twitter's JavaScript then it's up to Twitter to provide this functionality within their JavaScript.
I think you'd have to look into writing your own JavaScript file that fetched your Twitter RSS feed and parsed it on your page.
You might want to look at Remy Sharp's solution - at a brief glance it looks to do what you want: http://remysharp.com/2007/05/18/add-twitter-to-your-blog-step-by-step/
<html>
<head>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
</head>
<body>
<br />FIND US AT <br /><strong>#HOOKLINE_SINKER</strong>
<div id="twitter_update_list">Updates will go here!</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/hookline_sinker.json?callback=twitterCallback2&count=1"></script>
</body>
</html>

Categories