I saw this post:
Random Div Order on Page Load
and the working solution was posted:
jsfiddle.net/BwJHj/1/
Which works each time I refresh that page ^ As soon as I make my own, or even just copy the exact HTML/CSS/JAVA from that demo, it doesn't work?
Just wondering why that may be.
Select Javascript from settings and it will work
without javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/][1] (no randomize)
with Javascript : [https://jsfiddle.net/UserIsMonica/daw5nytd/1/][2] (Randomize)
It's common first time Jsfiddle user can easily miss that. i did :)
happy coding !!
Related
I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource
It's been a long time since I last had to do any html, but one of the features that will apparently still work, but is not good practice, was to divide a page into frames and the you could use some sort of nav bar with all the page links to populate a targeted frame. eg.
clicky
I tried using the <iframe> tag, and although it's almost exactly what I want, I found it to be very frustrating to get it to autosize to the correct height depending on the content being loaded into it.
Obviously, I could just make an almost identical page but change the content on the new one and link from one to the other, but I have a rather nice css slideshow as my background for the site and I don't want it to reload every time a link is clicked!
Now, I'm loving stylesheets and divs, so is there any way to do the above without resorting to HTML 4? I'll take a javascript answer if there really is no way to do this in CSS and HTML 5.
Thanks in advance, you lovely people!
So, you just want to update the actual content, that differs? You could do it with iFrames, but this is not recommended at all.
The "new" way to use is called "AJAX"
It is a technique to download data from the server, without reloading the current page. This is done via JavaScript (and serverside PHP). That way you can update the page content only.
There are many tutorials on the web, also many common questions are answered on stackoverflow alreay. Feel free to check them out :)
EDITED: New information: When I inspect the field, and the code is highligted (in the inspector), then the statements all work as they should, but when the field isn't highlighted anymore, the statements do not appear to work. Hopefully this helps diagnose the issue.
I have a wufoo form (a hosted form that you can embedd, send to spefic email on submit etc). I have a field on that form that I am trying to populate with a certain piece of data once I click a button. I believe I have the correct code to make this happen, and it should work:
$('#my-button').click(function() {
$('#Field3').val("something");
});
I have tried many different ways:
$('input[id="Field3"]').val("something");
$('input[name="Field3"]').val("something");
and a few reaches which I didn't really think would work..
$('#Field3').append("something");
$('#Field3').text("something");
There are a few things that confuse me here, and I will post screens below showing what I mean. I can type all of these commands in the console once the page is loaded and nothing will happen to the field (with the id of Field3)...most of the time. But on several occasions, I would reload the page, try a few statements again, yes the same ones, and then it would work. No idea why or how, but it is sort of an intermittent thing. Obviously that's probably not the case, but I am pretty confused as to why this is happening;
Below are three screens of my console. For the first two, the field finally populated after about 10 or more tries in the console, and then continued to work while using commands that didn't work before. The last screen is an attempt that did not work at all:
[![Eventually Works After Last Command][1]][1]
[![Eventually Works After Last Command][2]][2]
[![Did Not Work][3]][3]
[1]: http://i.stack.imgur.com/JKVxY.jpg
[2]: http://i.stack.imgur.com/MLca8.jpg
[3]: http://i.stack.imgur.com/0viRA.jpg
(Apologies for the way I had to post these images, I keep getting formatting errors that will not let me continue to save the post unless I cmd+k them)
I try everything in the console first, but I can not find any patterns here. Any ideas or input would be greatly appreciated, and thank you for your time.
At this point I'm pretty sure the problem has to do with the form-code switching or adding certain classes under certain conditions, so I downloaded the code from my Wufoo account rather than embedding it. Then I only added the code for the view (not css or JS), and it works now.
My original statements (not the reachers) all work fine now when I try them. Thanks for the time everyone.
I know you solved your issue, but figured I'd chime in in case you or others have this issue again in the future. It sounds like your issue was related to execution order. Wufoo's embed scripts are asynchronous, so it's very likely that the input fields in question didn't yet exist on your page at the time your jQuery click handler was evaluated. Changing your original code to jQuery's "on" method instead of "click" would likely have solved your problem, as "on" provides a delegated event listener. At any rate, glad you got everything sorted out!
In the console I assume there is no jQuery loaded.
I usually write:
document.getElementById('Field3').value = "something";
Updated your Jsfiddle. The only thing I changes, I added the reference of the
Jquery. Might be that's the problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
I have an html page, and I need a link to show that the user would be going to 'example.html', when really, the link goes to 'javascipt:ajaxLoad(example.html);'.
I tried this:
Example
But it didn't work. Any help? I already asked the webmasters stackexchange, and they told me that this would be a javascript programming question. Not an html question.
Example
By returning false you prevent the default action. And this way the links will still work when javascript is disabled, but then you don't get the AJAX functionality.
Just point the href at the actual file. The javascript onclick will take precedence - as long as you take care to disable the actual click effect by doing a "return false" or similar, the status bar will show 'example.html' and not the javascript url.
As well, note that it should be javascript:... (you're missing an r). The onwhatever attributes are already assumed to be javascript, so you could just say onclick="ajaxLoad(...) anyways.
Look, I'm not sure if I got exactly what you're asking about here, but the following fix often works with me. Just change the double-quotes to single-quotes, and put double-quotes around the example.html part
<a href="example" onclick='javascipt:ajaxLoad("example.html");'>Example</a>
I'm creating a webform that has combos containing 100 values or so. The values are the same.
The form may have several records. So if there are 100 records there are 10,000 lines which seems pretty wrong from a "download" point of view.
The thing is: I want to keep that combo dynamic to keep the id from the database.
So I came up to the following:
.....
<script>
stupidCombo = "<option>a"+
"<option>b"+
...
"<option>99zzz"+
"</select>";
</script>
..... form here
.... for each item in huge list do paint <table><tr> etc. etc
<td>
<select name="comb-<%=id%>">
<option selected><%=obj.val%>
<script>document.write(stupidCombo);</script>
</td>
... close form, table, html etc.
I have rendered it and "look" fine. The page has decreased from 50k lines to 5k and the select is created by the javascript on the client side.
My question is.....
Is this ok?
Is there any risk involved?
I borrow this Idea after understanding who most of the javascript frameworks work, but most of them work on a <div> element rather that just to the document it self.
I'm targeting IE6 and this is a quick fix that has to be on production tomorrow morning ( so I don't want to spend too much time on this ) but I don't want to have 50,000 lines written for each request if I can help it.
Thanks
HTTP compression (mod_gzip, etc.) will compress all that nicely.
If you insist on document.write, you will have to use JavaScript to write <select> element as well, because in HTML you're not allowed to put <script> inside <select>.
Another approach is to send one copy of the control to the browser and then duplicate it with help of selectElement.cloneNode(true).
HTML produced by document.write works in same way as normal one, so there is no any technical problems with your solution. ( of course, such solution works only if javascript enabled )
By the way, for the lists with big count of options, you can look at "suggest box" component, which can replace native selectbox.
well it obviously won't work if javascript is disabled.
Google does it ("document.write") all the time (Analytics/Adsense/...), so I don't see why there would be anything wrong with it.
Your solution does look a bit odd, because the <script> tag is inside a <select> tag, so you better check in several browsers. After all, you never know what IE is going to do :)
Update.
I've done just the way I asked and it worked fine. There were no problems with the js inside ie.
But...
Once the table is rendered, the next thing the user attempt to do ( always the user does something unexpected ) was..
"Ok, the report looks fine. I'm going to copy/paste it into MS-Excel thank you."
Which is something that I don't really care. Is up to the user, but the result was: The excel spreadsheet die ( or froze which is almost the same)!!!! because the javascript engine within the excel is not as good as it is inside IE, the combos took forever to copy and actually it leave excel application unusable.
I didn't knew the copy/paste was so good from IE to Excel that it actually copied all the generated html and Excel tried to run the javascript too with terrible results.
I'll try again by leaving the raw html and see if that works better.
:(