I'm not the very best expert, but I can do a decent job good looking and functional websites or web applications. My main tools are PHP5, HTML5, CSS2 y 3, a database (SQLite, MySQL) and JavaScript and jQuery.
I'm not an expert at all in JavaScript. I often find interesting jQuery plugins or tutorials and try to mix them up to do the functionality needed. This time I'm mixing maybe too much plugins and js files from different sources.
In fact, my app do what I want except for certain behaviors. There are no errors, everything looks fine, but the misbehavior persists. So maybe I need to specify a class I don't know about, or one contradicts another one from another plugin and I just can't understand, for example, why a <button type="button">DON'T submit</button> just submits the form.
Anyway, my point is: how can I debug this situation? Is there a generic tool, suggestion, workflow or something to help me understand conflicts or omissions between libraries or plugins? (JavaScript libraries, my own JavaScripts and jQuery plugins)?
Edit
I know about Chrome's debugger and Firebug. But maybe I just don't know how to get the functionality I need. Reading about how to use these tools haven't helped me. For example: I've got a tag which has inherit a class I didn't assigned it to by hand (example: <button type="button" disabled>DON'T submit</button> I didn't write disabled by myself) So some JavaScript file is assigning it, but how can I see WHO did this? Which file? Class? Plugin? Library? Etc? That's another example of what I mean to ask.
It is possible that you're using two libraries that use the $() function. In jQuery, the $() function is just shorthand for jQuery(), so you could try taking your jQuery code and replacing every instance of "$(" with "jQuery(" and see if that helps out. Without know what scripts you're using I can't tell if that will work or not, but this is likely the problem if you have more than one framework (e.g. jQuery) loaded at one time.
Just make sure you don't change any non-jQuery functions from $() to jQuery() or else they'll break.
The default functionality of the <button> tag is the same as <input type="submit">.
http://htmldog.com/reference/htmltags/button/
Yes, there are tools to debug javascript.
Chrome as inbuilt debugger (Press F12 to open it)
But my favourite is firebug (its an addon for firefox, download it from here)
To resolve the conflicting issue, read here
Also, by default <button> submits the form.
If you do not want <button> to submit form, you can use this,
<button type="button" onclick='return false;'>DON'T submit</button>
Related
This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).
There are so many lightboxes to choose from, I'm looking for a very lightweight one to use in an embedded javascript widget that would be a single domain name. I saw the perfect one on chainreactioncycles.com, it popped up out of nowhere so I took a screenshot:
I tried looking for info on it on the page source, but couldn't find anything that would let me trace where it came from... Would anybody know of one like this? Or exactly that one?
If not exactly like above, anything similar would be great too, keeping the following in mind:
Very small javascript download (animation not needed)
Self contained, not dependent on any libraries other than jquery (since I'm already using that anyway).
Works in major browsers
Close button (like GetSatisfaction or UserVoice)
Dims background
Avoids javascript namespace conflicts (or can easily be made to avoid them)
CSS styling of lightbox does not interfere with site styling
Have you used an existing lightbox scripts for this same purpose with similar requirements? Did you roll your own? Insights welcome!
What you are looking for is called a modal box.
Here is a list of them
... and here is a striking replica of what you are looking for
Check out Zoombox.. It sounds like what you're looking for... Simple to use... Allows custom content.. jQuery Module... From past experience it covers what you have outlined as requirements etc
http://www.grafikart.fr/zoombox will tell you all you need to know.
Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js
Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.
Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.
I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.
There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique
head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.
I'm learning jQuery and am about to write some pages using intensively that library. I just learned that some user disable JavaScript on their browser (I didn't even know that was possible and/or necessary).
Now, here's my question: What happens to my web application if a user disable JavaScript? For instance, I'd like to display some screens using AJAX and commands such as 'InsertBefore' to bring in live a DIV that will display the result.
So, if JavaScript is disabled, I wonder what going to happen to all this work that relies on JavaScript?
I'm kind of lost.
Thanks for helping
You may want to start by reading on Progressive Enhancement and Unobtrusive JavaScript.
I would also suggest to investigate how popular rich web applications like GMail, Google Maps and others, handle these situations.
I just learned that some user disable javascript on their browser
I do. The "NoScript" plugin for FireFox does the trick.
So, if Javascript is disabled, I wonder what going to happen to all this work that relies on Javascript?
It won't be functional.
A good practice suggests designing a site not to rely on JavaScript for major functionality. At least, accessing its content (in read-mode) should be possible. JavaScipt should only add interface enhancements like Ajax techniques etc. But the fallback version should always work.
I feel really sad when I see a site which is completely broken without JavaScript. Why can't people use CSS to put elements in proper places? Why do they try to align elements with JavaScript even if there is no dynamics involved?
The same goes for Flash sites. Once in a while a land upon a "web-design-agency" site which makes picky comments about me not allowing JavaScript. When I do I only see a basic primitive site with a few menus and that's it. What was the point of using Flash when the work is so primitive it can be done with raw HTML and CSS in an hour? For me it's a sign of unprofessional work.
All what's done in JavaScript won't work. Some users disable it for security reasons, NoScript is an excellent example. You can try it yourself by removing the scripts from your page or installing the NoScript-plugin for Firefox.
As a rule of thumb:
Make the website working with only semantic HTML
add the CSS
add the JS
But the website should be (almost) fully functional in stage 1.
If you disable Javascript in Safari things like Lexulous in Facebook won't work properly, the mouse letter carry function doesn't work.
How do you make an HTML button behave just like a hyperlink where, if you click on it, it will open a browser window showing a page you want?
I understand this much. I think I will use this
but instead of a link to some javascript code inside the quotes for "onclick" I want to put something simple that will launch a new browser window.
onclick and window.open
<input type="button" onclick="window.open('http://www.example.com','_blank','resizable=yes')" />
In Head:
<script>
openNewWindow = function()
{
window.open(url, "_blank");
};
</script>
In Body:
<input type="button" onclick="openNewWindow()" >
I prefer to define a function named openNewWindow() instead of putting the code in the input tag. This is for organization. I highly recommend you do this if you're planning on having many different buttons for opening different windows.
I think this is the best solution for you.
Try this out
<a href="http://www.stackoverlfow.com" target="_"><input
type="button" value="Click Me"/></a>
Happy Coding!!
You could do something like this:
window.open(url, "window-name", "menubar=no,innerWidth=600,innerHeight=600,toolbar=no,location=no,screenX=400,screenY=40");
Passing a name to the open method causes the browser to open a new window. The third argument defines the looks of the new window.
<input type="button" value="Google"
onclick="window.open('http://www.google.com', '_blank');" />
I'm 7 years late, I realize, but I had a similar issue and thought I comment for those who may follow.
If you're using Bootstrap, you can attach Bootstrap button classnames to anchor tags and make them look just like buttons:
I Look Like A Button
Bootstrap supports basic sizes as well, including btn-sm or btn-lg. Granted, not everyone uses Bootstrap but even then the default styles are free, easy to find, and can be copied into your own stylesheet even if you're using a custom boilerplate layout.
I've seen a lot of conflicting information regarding Content Security Policies. The primary recommendation from Google's developer site, web.dev is found here => https://web.dev/strict-csp/#what-is-a-strict-content-security-policy.
There are several professional level recommendations stating that a CSP should be used. I write HTML sites, right now, but intend to move to Angular and/or React. In the meantime, the recommendation is that a js script be used to get the element id and forward via the script, rather that using a link.
The justification for this is that cross scripting attackers can use the vulnerability of these elements when the "onclick," or related commands, are used. This removes the vulnerability.
I would recommend approaching it from a CSP point of view and following the linked guidelines to make your site compliant with W3 and Google recommendations.