I've been trying to use Jquery UI, and I keep getting confused by it. So I've put together a minimal test-case here.
http://jsfiddle.net/vmZap/
Basically, I include JQUERY, JQUERY-UI, and the JQUERY-UI CSS file. Then I put this code on the page:
<button>Button</button>
Based on my reading, that button, should show up with the Jquery UI Signature look (complete with style and markup changes). As you can see in my fiddle, it doesn't. Is there some sort of call I'm missing that I need to use to initialize jquery-ui to try to do something rather than just sitting there?
I have been fiddling with this stuff for days, but when a test-case as simple as this doesn't work, I'm out of ideas.
If you want to use the jquery-ui button on all button elements, then in the onDomReady you need to add:
$('button').button();
This will apply the jquery-ui button styles to all elements matching your selector, in this case all button elements.
I haven't worked much with jQuery-UI, but don't you need a JS call to make the button look different?
$("button").button();
Related
I have just started my study with css and html and I have first problem. I try to show my menu after clicked on it. When I clicked on it, menu item' s show up and immediately hide. How can I show it and hide after next click on my menu?
There is demo: jsfiddle.net/jekfej46/1/ Thanks a lot.
This is happening because :active is only a state. When you click an element, it changes the state to :active but only as you keep holding it. The best way to do it would be using jQuery to add a class to the menu when you click that button.
If you don't know how to use jQuery, there are lots of tutorials all over the internet that can easily guide you through. It's pretty easy once you get the principles.
Here's a working fiddle: http://jsfiddle.net/jekfej46/1/
In this case, JavaScript checks if the element already has the active class. If it does, the class is removed so the menu closes. But you can change that behaviour if you want.
You can't do the click event only with CSS. You need JavaScript here. Something like this will do this for you using jQuery.
$('#category').on('click', function(){
$('.dropdown-content').show();
});
Ohh, a lot guys. Now, I know that I also need js and jQ to improve my pages. Thanks.
I want to know how the pop up windows integrated into websites are built. I am trying to create one for my websites but i don't really know it is created whether they are plugins or not. Any help as to how to go about it.
Below is an example of what i want to do.
You can use hotjar.com to put a feedback box in your page, there is a lot of services that provides this feature, but hotjar gets the job done
Beginner! To make a pop-up like the one you provided, you would need to write backend code (Node.JS, PHP, Python, etc.). But for just a simple info pop-up with a button that activates the pop-up refer to this jsfiddle I created:
https://jsfiddle.net/d706dyg7/1/
$("#whateverid").click(function(){
//whatever code
});
That mean when that element is clicked blah happens.
Hope that helps,
Ben A.K.A BlackSky
P.S. If you want a solution in pure javascript and not jQuery just let me know and I will edit my fiddle!
I know I'm like .. 10 years late. But for anyone still wondering I thought I could be of some help!
If you want to do this using ONLY html and css (using a framework in visual studio like ASP.NET) for example.. here's what I did:
First, I made sure I had multiple "divs" in my code. For me specifically, I had two main ones. The first one whose id="main", and another whose id="popup" with the 'visible' property initially set to 'false' for the popup div.
Then, on whichever event you're looking for (button click for example) you'll simply set main.Visible = false and popup.Visible = true, then you could have more buttons in your popup (yes, no, cancel, confirm, etc.) which do the exact same thing, but in reverse!
The most important thing to make sure of is that you have the 'runat="server"' property in your divs so that you can access them in your CS code
Hope this was helpful! :)
Your looking for something called a modal. Depending how you wrote your HTML there are different ways of approaching this issue.
If your wrote your website in Plain HTML you can use the following tutorial to create one
www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/amp/
However if you wrote your website with a library such as Bootstrap they have built in pre made modules that you can attach to your cpde. These can Ben found in the library's documentation.
Could someone please tell me how can I change the default css of a alert/prompt box ?
You can't. They are native to the browser and are not styl-able.
You should turn to javascript alert-like systems. Using jQuery, here are some:
jAlert
jQuery UI dialog (with some tweaking)
This page proposes three alternatives to native alert/confirm/prompt
This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog
The alert box is built into the Browser. You will need to popup your own dialog. The jQueryUI is very good for this.
For an example on this, look on the jQuery UI site.
As noted above you may always use the jQuery Alert box...
But you may also fire a JavaScript/jQuery Function in which displays a DIV (HTML Element), in which you may style completely.
The alert box that is used by javaScript is part of the browser. (other poeple have pointed this out but if you would like to have a good starting point try this.
http://jqueryui.com/demos/dialog/#default
jQuery Ui has some great tools for creating your own alert box and will also having other helpful options.
Just wanted to give some more information.
I try to use the perl script to automate the interaction with a website.
I use module WWW::Mechanize to realize my design. But I cannot perform the button click in my perl script by using command as below.
$mech->click( $button [, $x, $y] )
$mech->click_button( ... )
It is because this button does not belongs to any form and without name, I can not call or locate this button in my perl script. How can I make it possible to click this button in my perl script like I interact with browser? Thank you.
<button class="button transactional" id="checkout-now"><span>Check Out Now</span></button>
If button does not belong to any form it should have onclick event defined, like #Bilzac and #hijack mentioned. In this case you are not able to reproduce browser's behavior because WWW::Mechanize does only html analysis.
Dealing with JavaScript events it's more easy to implement browser's network activity rather then implementing whole JavaScript events and DOM interaction.
Well sometimes all you need is $mech->post() because it's harder to find what going on with JavaScript when you click some element.
So you need to find what request is performed when you click this button (you may use Firefox HttpFox for this) and after that construct same request using WWW::Mechanize:
$mech->post($request_url, Content => {FORM_FIELDS...});
You can add onclick event on this button. like this:
<button onlick="alert('hello');">Click Me</button>
Clicking the button in a browser only runs a piece of JavaScript. You can't do that in WWW::Mechanize, because it has no JavaScript support.
What you could do, however, is find the JavaScript code that's being run when the button is clicked and write some Perl code to do the same thing. Unfortunately, it can sometimes be hard to find which JavaScript event handlers apply to an element. Even the otherwise excellent Firebug doesn't seem to have any simple way to list all event handlers associated with an element. (There does exist an Eventbug extension, but at a glance it doesn't seem to work very well.) The Visual Event bookmarklet might also be worth trying.
I am not 100% sure what you are asking for, but I am going to swing at it.
You do not need the button to be part of a form for any sort of interactivity. You can do this with just JavaScript & HTML.
$('#checkout-now').click( function() {
alert('Hello!');
//Do other stuff here, regarding the form! (Call Perl scripts etc.)
});
http://jsfiddle.net/fCdxR/1/
Quick example of how it works!
Hope this solves your problem.
Ok, here's the thing.
I've done a webpage which contains forms and so I added buttons as elements and this works great. I created their own css classes and use graphics as background images for each of them. All working great (these are submit buttons btw)
Anyway, I've also got a jQuery script from before that takes all a href hyperlinks and add content from a set div from an external file and adds to a div in my current page, all in one animation. But this would probably not work with form buttons?
In any case I need to be able to have these buttons work as traditional hyperlinks anyway. So what do I do?
I thought about using css-buttons alltogether, but I'm not able to have them stack vertically. Using float left or right just put the buttons outside of their parent containers (probably a different fix for that).
But in any case, using css buttons, that wouldn't work as a submit button for the forms anyway would it? Should I perhaps use both form buttons and css buttons? What do you do?
<button> elements.
You should never use links to submit data, users with javascript disabled won't be able to use them, crawlers can submit data accidentally, etc...