Good Replacement For Select Element?
Jul 9, 2010I was wondering if anybody knows of a good replacement for the select element. Maybe something using jquery?
View 7 RepliesI was wondering if anybody knows of a good replacement for the select element. Maybe something using jquery?
View 7 RepliesI've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not.
Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain :D :
Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size.
This is my current coding:
<script type="text/javascript">
<!--
function change_img(path) { document.large_img.src=path}
function preload(){
[Code]....
I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it.
What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example:
250x250 piece1's name is ...art1 and that name is located right under the image.
I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5.
Are there any good web UI component libraries -open source or commercial - that you can recomment? They need to be cross browser compatible and have good documentation. Jquery UI is very good but limited in number of controls it offers. YUI is very verbose and very hard to use. extJs only other one I can think of. Any others you use and like?
View 2 Replies View RelatedWhen the page loads there will already be a drop-down on the page, here's an example of the drop down.
<select id="dropdown">
<option value="2121S">Option text</option>
<option value="2122S">Option text</option>
<option value="2123S">Option text</option>
<option value="2121A">Option text</option>
<option value="2122A">Option text</option>
<option value="2121K">Option text</option>
</select>
On page load it will evaluate this drop-down and repopulate it determined on their values. If there is an S in any of the values the drop-down will generate an option for 'S' like so.. <option value="s">S Option Text</option> And for the first code example in this post - the Javascript would be able to repopulate the drop-down with the following:
[Code]...
I'm having some problems understanding the append() function. What I'd like to do is select an element using it's ID and add a row to the table with a HTML form element. The table is dynamically generated using a Django template ( form.as_table() ) so I'm not able to alter the original HTML markup too much.
If I had a table like this...
6. Display a message saying Good Morning if it is in the morning, Good Afternoon if it is in the afternoon, and Good Evening if it is in the Evening. This is my code:
[Code]....
I'm trying to unselect element or not allow select element to prevent this:
How can i do this? This only happens on FF, on IE8 its fine..
My html:
It is possible to make a script that hides the element clicked and this way hide the items I want.
View 1 Replies View RelatedI want to get the text between the second td. The 83:
<tr
bgcolor
="123014"
> <td
[Code]....
The table hasnĀ“t a id ore something lime that.
Thought of something like this ;)
var kraft_cp = ('tr:has(td):contains("Kraft")');
Is anyone in here familiar with the javascript textarea that is used by any of the textarea replacement WYSIWYG editors.. like SPAW, MoscCE and TinyMCE.
I found that they ALL wrap paragraphs in div tags rather then p tags and I was hoping someone could tell me how to fix this.
I did a batch replacement to replace all "div" with "p" but even that didnt keep the editor (SPAW) from using div tags instead of p tags.
What is the replacement for onBlur in Mozilla
<body STYLE='background-color:buttonface;' leftmargin=0 rightmargin=0
topmargin=0 bottommargin=0 onBlur="window.focus()">
I have a very simple jquery RTE I've built. When adding a link I currently do this ( $.iframeread is just a function to pick the right way to "find" the iframe content for the browser being used)
[Code]....
I can obviously create this and show() it when I need to - what I don't know how to do is pass $('select[name="type"]').val() + $('input[name="link"]').val() back to the orginal function - ie how do I capture $link
[Code]...
I've been looking at all the various image replacement techniques..and they all seem unnecessarily complicated. I came up with:
function replaceLogo() {
document.getElementById('header').innerHTML = '<img src="/images/logo-tci.gif" />'
}
It's just replacing the layer contents at a very basic level.
This works just fine, I'm just wondering how well supported it would be across different browsers. Anyone know of a table of browsers that support innerHTML or see potential cross-browser issues with this technique?
what is the replacement for window.navigate in mozilla & i was used window.showmodelessdialog in IE5 - in mozilla it is not working
View 5 Replies View RelatedI use the following to translate button names in Google Maps:
G_NORMAL_MAP.getName = function(short) {
if(short) {return "Karta"}
return "Karta";
}
It works (tested) with Firefox 1.5 (Linux and Mac) and Opera 9 (Mac).
But Safari 1.3. says "Parse error".
What is wrong - code or Safari?
Testing page: [URL]...Testing info: username: claudion ; psw: bolibokhan Background: You enter some text in message editor textbox; press send; page (& not popup) appears stating 'Message successfully recorded...return to message'Send button HTML <input type="submit" value="Send" class="button2" name="post">
Limitations: Cannot edit template/html ...had to be done via javascript/jquery Objective: to replace Send button with a custom one such as one you press it (after message is entered) you be redirected back to your current page(URL) & 'Message successfully recorded...return to message' page is thus skipped.
[Code]...
I am using jquery in my current application to add min/max functionality, i.e, when the user close at maximize, table gets maximized, when clicked on minimize, table gets minimized. It works fine functionality wise, but, ideally, when maximized, max image should replace with min image and vice-versa, but images gets replaced only when clicked 2nd time around, for very first time, images don't get replaced, though the system works fine,
Here's how I am calling the function:
<a href="javascript:void(0);" onclick="showinghide('contacting')"><img src="images/arrows/opened.gif" id="contactingarrow" class="myarrows"></a>
Here's the function:
function showinghide(oobj){
if(oobj=="contacting"){
jQuery("#contacting").toggle('slow');
mycookies("contacting");
}
And the jquery code is:
function mycookies(myobbj) {
var mycookiesvar=myobbj+"cook";
if(jQuery.cookie(mycookiesvar)){
if(jQuery.cookie(mycookiesvar)==myobbj+"hide"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"show",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/open_bk.gif'})
} else if(jQuery.cookie(mycookiesvar)==myobbj+"show"){
jQuery.cookie(mycookiesvar,null);
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
jQuery("#"+myobbj+"arrow").attr({'src':'images/arrows/close_bk.gif'})
}} else {
jQuery.cookie(mycookiesvar,myobbj+"hide",{expires:365});
}}
I have searched and searched and tried many different options but can not get this to work although I am sure it is possible.I need to be able to replace a string using a variable as the search and replacing using the matched reference group such as $1 I can search for a variable and I can get the reference to work - but not both at the same time.The following works great - except it does not preserve the case of "Test" in the string
Code JavaScript:
var q = "test".toLowerCase();
var mystring = "My Test string";
var reg = new RegExp(q, "i");
mystring.replace(reg, "<mark>"+q+"</mark>");
This is the reason I can not simple replace with "q" and need to replace with what was actually found. But this does not work like this:
Code JavaScript:
var q = "test".toLowerCase();
var mystring = "My Test string";
var reg = new RegExp((q), "i");
mystring.replace(reg, "<mark>$1</mark>");
As "q" is a variable - how do I put parentheses around it so that I can reference it in the replace statement?
I have a big image and several small thumbnails. Every time the user clicks on one of the thumbs, I want the big image to update. This is my code:
Code:
$("#thumbs a").click(function() {
var largePath = $(this).attr("href");
$("#largeImg").attr(src: largePath);
[code]....
Although, the thumb image gets always displayed in an empty window, as if there is no "return false". If I click Back in the browser, I see that the big image has been indeed changed just before the link executed. Why is my "return false" not firing and preventing the browser from following the link?
my understanding is that one of the great benefits of $(document).ready() is that it will execute code once the DOM is ready, yet prior to content being loaded.
For my example, with what I'm observing in Chrome (I'm on a MAC), I'd like to replace a default image with a different image, without seeing jQuery do the work. However, in Chrome, I see the original image for a brief instant before the jQuery replacement pops in. Why the flicker of the original image? Perhaps I'm not understanding the particulars of what is firing, and when its firing...
You can view online here, and refresh a few times to see the flicker in Chrome:
[Code]...
I'm sure some wizard will tell me this is a classic example of "piece of cake"; in which case I bow and promise to listen In case I've struck granite rock, feel free to throw questions my way and I'll tell you if I've tried it or not.
I have a file, main.php (I know this is the JS-forum, bear with me). It outputs HTML and inline Javascript functions. When the user clicks on a graphical "tab", that tab is activated, and an ajax call is made to fetch.php with some specific parameters. Once the ajax request has completed, a given innerHTML container on the now active tab is filled with the stuff that fetch.php outputs.
So far so good.
The problem is that the stuff that fetch.php outputs is partial pure HTML and partial inline javascript. And this is where it gets tricky. If I declare an inline javascript function in the returned data, Firefox (and I suspect MSIE) refuses to understand that the function is there. It simply doesn't exist (!).
Using the Web Developer add-on for Firefox, there's an option to look at "Source code" and "Generated source code". The output from these two differ in that when I view the "Generated source code", I see the dynamically inserted javascript/HTML from fetch.php, whereas viewing "just" the source doesn't.
What did I do wrong? How do I get the browser to find/accept/activate the javascript code/functions that were inserted dynamically? I cannot put them in a .js file and include it, since they need to be dynamically created, and I cannot use eval() since that executes javascript "as is", in which a function will not be executed unless called.
I have a photo gallery built with XML and PHP (pulling images from a client's Myspace albums).The gallery works fine, displays thumbnails and captions, paginates properly, etc.The whole thing is loaded by AJAX into a div, which complicates things a bit, but it works.When a visitor clicks a thumbnail, the full-sized image displays in a div overlay on top of the gallery div.The overlay is hidden until a thumbnail is clicked, when it is toggled to "visibility:visible". When the overlay "close" link is clicked, the overlay is hidden again.That also works. Some of the images are too large to display properly inside the div without throwing off the layout, so I had to set a max height and width.I can't just use CSS to set the dimensions or it'll size EVERY image to those dims, and the photos are all different sizes...some wider, some longer.So I used javascript to check the image size when the thumbnail is clicked.
All of that worked.(Although strangely, if I try to toggle the visibility as part of the function rather than putting it into the link, it doesn't work!)The problem is that once the dimensions of "img1" are set, they STAY that size even when the next thumbnail is clicked.So if the first image is 800px tall, the script crops it to 640px...then the next image may only be 400px pix tall but it displays as 640px high, making it distorted.I tried to add a "resetImgSize" function to the "close" link in the overlay, setting the img1 dimensions back to 2px x 2px when the overlay is closed, but the same thing happens...Once the img1 dimensions are set to 2x2px, they stay that way even when a new thumbnail is clicked.
I have just spent a while searching how to use regular expression to strip out spaces in a string and replace them with ',' I don't seem to be getting anywhere and was hoping someone could explain how to do it.
So for example:
Mystring = "a b c d"
My string would end up looking like the following
Mystring = "A','b','c','d"
I'm looking for a code (as simple as possible) for an image swap / replacement feature similar to these: [URL]Either is fine. One works w/ mouseover, the other works with a click.Dynamic Drive doesn't have one.
View 5 Replies View RelatedThe situation is; I receive a response back from the server which i only a part of html code. e.g. a table like <table <tr><td>high</td></tr>........ </table>. In other words, I receive
file as a response which has a part of html file.
My aim is to replace an existing document node with the new response.
If I run the following lines (JavaScript):
var parsedText = document.createTextNode(req.responseText);
body.replaceChild(parsedText, toReplace)
It replaces the node 'toReplace' with html codes with the tags include which is not what I want. The html tags are not wanted but should display in correct format as specified by html (a tabular form if htm tag is <table>)
If I try:
I was trying to find a browser independent way to raise a modal dialog. I know that MS IE has showModalDialog and Firefox has an attribute modal for window.open but I was wondering if anyone knew of a solution out there that would disallow anyone to browse from a pop-up window without closing it. Disabling the text highlighting and right click are not required, just disabling the user from browsing with the dialog open.
View 4 Replies View Related