JavaScript - Javascript And Jquery Question - Is There A Better Way?
Hello, posted this on dynamicdrive.com with no response, so I am trying this forum.
I have been assigned to build a content locator. We cannot use a database and all content needs to load from same page. Based on my boss' design and client needs, this is what I came up with: http://contentx.com/content_locator/ I am using a Dynamic Drive script to power the dropdown and content underneath the drop down, http://contentx.com/content_locator/js/dd_cx_script.js and using a JQuery script to change the content in the window to the right. http://contentx.com/content_locator/...s_cx_script.js My questions a 1) Is there a better method to do this? (stupid question I know... of course there is!!) I would like it to be as simple as possible, no animation needed. Just need to have content from the DIV on the right side load content in the Main body div on the left (the box) 2)Is it possible to change the content on the right side when you select an option from the drop down? (say I select <option>Free Campaigns</option> I want the content to change on the right to match one of the free campagins) 3)Finally, my margins in IE 7 are all over the map, looks great in all other browsers, but in IE my TABS (colored green and blue) are about 10pixels up to high, and my belowcontent div on the left has a top margin of 12px below the dropdown... Thanks for any help, zack Similar TutorialsHi, as the title states, I'm trying to learn some basic javascript, more particularly, jQuery. I HATE having to "allow" active content to run on my IE browser. Is there a way to allow active content permanantly? Instead of having to click allow each time I refresh or reload my test pages? Also, IE keeps freezing or crashing when I run pages with scripts on them. Is this just my browser? or something to do with the active content permissions? Trying to google my questions, but no luck yet. Im using the toggle script demonstrated he http://www.sohtanaka.com/web-design/examples/toggle/ It works perfectly, but im wondering if it is possible to have a button to expand all and contract all. Ive been reading through this page: http://api.jquery.com/toggle/ Im having a hard time understanding it, because this is one of the first things I have worked on with jquery. Can anyone help explain how I can do this? I have a form validation with an AJAX username check and it works perfectly on FF, but doesn't work in IE 9. I am a complete newb when it comes to Jquery and Javascript, so any help/suggestions would be greatly appreciated. Jquery: Code: $('#username').bind('blur',function() { var formData = $('#register').serialize(); $.post('username.php',formData,processData).error('ouch'); function processData(data) { console.log(data); if (data=='pass') { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\">Username Is Available!</p>'); } else { $('#usernameavail').html('<p id=\"fail\">Username Is Available!</p>'); } } else { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\"><img src=\"http://images/error.png\"> Username Not Available</p>'); } else { $('#usernameavail').html('<p id=\"fail\"><img src=\"http:///images/error.png\"> Username Not Available</p>'); } } } // end processData }); // end submit Here is the username field I am validating against the database for a duplicate username: Code: <input name='username' type='text' id='username' class='required' maxlength='20'> Thanks in advance. Ok super new to Jquery here. I finally got talked into trying it. Ok so... I have Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; action1.style.filter = "alpha(opacity=" + (0*100) + ")"; action1.style.opacity = 0; var si = setInterval(function() { io+=0.05; action1.style.filter = "alpha(opacity=" + (io*100) + ")"; action1.style.opacity = io; }, 100); io = 0; if(io==1) { window.clearInterval(si); } clearMenu(); } I would love to know how to replace that with the fadein() function. I'm looking for something like this Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; //THE FADE IN GOES HERE but how? clearMenu(); } ok last question. Do I need to hide my elements somehow differently in CSS before I can use this? update: ok so far trying this and its not working Code: function windowOpen() { windowSize() document.getElementById("action1").innerHTML = ''; action1.fadeIn('slow'); clearMenu(); } finally made it work with Code: function windowOpen() { windowSize() action1.innerHTML = ''; action1.style.display = "none"; $("#action1").fadeIn(1300); clearMenu(); } Not entirely lost in the dark with jquery here, ive done quite a bit with it. I was just wondering if anyone might have ideas to solve this particular problem i am having. The code pretty much looks like this... Code: $('#created').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#csite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#csite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); //home hover $('#home').hover( function(){ if(y == false) { $(this).css({'border' : '1px groove #dfdfdf'}); $('div#psite').show('slide',{ direction: "down" },500); $('div#sa').hide('slide',{ direction: "up" },500); }; }, function() { $(this).css({'border-style' : 'none'}); $('div#psite').hide('slide',{ direction: "up" },500); $('div#sa').show('slide',{ direction: "down" },500); }); The div sa is always present (its a sponsor logo) when hovering over a #created link or #parent site link, a div csite or psite comes up, (image representing parent site, image representing creator site) making them work is no problem however i was wondering if anyone had any ideas as how to change this so that when you are quickly moving from the created link to the parentsite the .hide and .show animation for #sa does not overlap, or does not fire otherwise they get in the way of each other... any help would be appreciated thanks in advance! OK, new to the boards. I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click. I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project. Any advice would be hugely appreciated. thanks in advance. What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file. It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page. Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference. Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there. Code: $(document).ready(function($){ var dataret = 0; $.ajax({ type: 'POST', url: 'mobile.php', beforeSend: function(){ $('#status').show(); }, success: function(data){ //initialize localstorage here alert('success'); // if it takes as long as it does, a few minutes, at least show a loading bar... $('#progress').progressbar({ }); }, dataType: 'json' }); }); Thanks in advance! I have a code written in jquery which I have to transform to javascript. is there any tool for this or I have to do this manually? Please help.. Hi, Can anyone help me on converting this code to jquery: Code: <html> <head> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { var noticecontent = document.getElementsByTagName("div"); for(var x=1; x < noticecontent.length; x++) { name = noticecontent[x].getAttribute("name"); if (name == 'noticecontent') { if (noticecontent[x].id == thechosenone) { noticecontent[x].style.display = 'block'; } else { noticecontent[x].style.display = 'none'; } } } } function showall(id) { showall.ud=showall.ud||false; var i=1; while (document.getElementById(id+i)){ document.getElementById(id+i).style.display=showall.ud?'block':'none'; i++; } showall.ud=!showall.ud; } </script> </head> <body> <center> <div id="parentdiv" > <div id="expandall" onmouseup="showall('noticecontent')" >OPEN/CLOSE ALL</div> <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div> <div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div> <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div> <div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div> <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div> <div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div> </div> </center> </body> </html> thanks Hi, I have done a script in Jquery that resolved my problem in Firefox and Chrome but not in IE. Thought of going back to Javascript. Could you please update me the equivalent for this Jquery stuff. <script type="text/javascript"> jQuery(document).ready(function(){ var backSize = (${not empty param.backSize ? param.backSize : 0} + 1); $("#goBackResults").attr("href", "javascript:history.go(-" + backSize + ");"); var existingValue = 'backSize=' + (backSize-1); $("#when-did-i-buy .pageNum a").each(function(){ if ($(this).attr('href')) { var newValue = 'backSize=' + backSize; if ($(this).attr('href').search('backSize=')!=-1) { var t=$(this); t.attr('href', t.attr('href').replace(existingValue,newValue)); } else { $(this).attr('href', $(this).attr('href') + "&tabId=1&backSize=" + backSize); }} }); }); </script> Thanks, Ravi.P hi how can i make somethin like the menus A,b, bla bla one this site? http://www.kanzenanimes.net/animes JAVASCRIPT (move.js); Code: <script type="text/javascript"> $().ready(function() { $('#ex3').jqDrag('.jqDrag').jqResize('.jqResize'); }); </script> HTML: Code: <script src="includes/js/move.js"></script> <div id="ex3" class="jqDnR"> <div class="jqHandle jqDrag"></div> <br /> MY DATA <div class="jqHandle jqResize"></div> </div> I have created a php script that POSTs to another page sendmail.php which then redirects to a thanks/successful page. Is it possible to have the form submit and return a thank you message on the same page. basically submit the form without reloading. I am using the Mega Menu from http://www.javascriptkit.com/script/...megamenu.shtml and need some assistance with an adjustment. The menu is working great as provided. However, we have a fairly wide menu layout and I have received comments that it is visually distracting to have the menu fly out horizontally. We want to have the menu start out full width and only animate to drop down vertically. Is this possible? If so, where in jkmegamenu.js would I make this adjustment? Thank you. Paul Hi guys, been running into some problems with all IE browsers and my jQuery Gallery from Galleryview. Background: I am using Java to do an image search and build up some HTML including the calls to run the galleryview scripts and return this back to the page using document.write() When I use the simple structure of placing the scripts and parameters into a sample page: Code: Code: <body> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100 }); }); </script> It works fine. When I try and pull all the scripts out of the page and inject them back in using document.write() I get an error on IE: Code: Code: sb.append("(function(){ document.write('" + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-1.3.2.min.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery.easing.1.3.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.galleryview-1.1.js\"></script> " + " <script type=\"text/javascript\" src=\"http://spaceforaname.com/js/jquery-galleryview-1.1/jquery.timers-1.1.2.js\"></script> " + " <script type=\"text/javascript\"> " + " $(document).ready(function(){ " + " $(\"#photos\").galleryView({ " + " panel_width: 800, " + " panel_height: 300, " + " frame_width: 100, " + " frame_height: 100 " + " }); " + " }); " + " </script> " +............+ "')})()"); The variable sb is a StringBuffer and is formatted and returned: Code: Code: nextPage.setValue(sb.toString()); nextPage.setEscapeHTML(false); return nextPage; This particular error in this case in IE(8) is: Object expected which I think is referring to the jQuery as the resulting images are displayed just not in Galleryview style. This is really wracking my brains and any and all help is appreciated. D. nevermind i figured it out myself
Hello! I am developing my personal website! And I am trying to implement it with JS completely. which means I need the page to be one front end page. But the back-end pages would be the ones which do the work and calculations! In other words and more explaination: I would like to have one "index.php" page that contains only a nav bar which handles the mission. Once the page load it loads with the content of "home.php" (the landing page) if the "contact" tab is clicked then I would like to load the "ContactMe.php" page content. I have done this already! but the problem is: "home.php" uses alot of javascript functions and jquery plug-ins. when I load it, it looks messy that you think the JS is disabled in your machine :-\ Note: the loading has been done with those methods: .load(), $.ajax! -> same results! The conclusion: * "home.php" * "ContactMe.php" * "About.php" Is it possible to load those pages in the "index.php" and still have their JS functions function correctly and display as if they were accessed individually? The goal that I am trying to achieve is that I make my whole website for the visitor as "One Page Site"! I am challenging myself with it though! Thank you in advance for your informative posts! Please Note that I have only put the <html><head><body> tags in the index.php and removed them from the back-end pages such as home.php, contactme.php and about.php! for that sake that it works correctly! but with no hope! I'm trying to build a gallery. So far I've used jquery for the scrolling thumbnails. The problem I am having is deciding which would be the best way to load the larger version of the thumbnails into a div? Currently I am using a jquery attribute replace, but the only problem I'm having is I want to use lightbox for the large images. Some of the images have text so they need to be big if the user would like to read them. Right now lightbox is working except that it doesn't understand what image it's on when you click on the large version. I believe this is because of the attribute replace. Here is where you can view the problem: http://www.tsutsumidaphoto.com/Mihoko/akiko3.php If you click on any thumbnail after the first then click on the large version it will bring up the first image then go from there. Any suggestions, I've tried for too long on my own! Hi! I couldn't find any information about this topic in the internet and I really wonder, how come people do not discuss it anywhere? Okay, jQuery works really great and offers many interesting effects, but what if you have JavaScript disabled? I mean I've browsed through several websites powered by jQuery with JS disabled and they doesn't work or behave weird. I know there aren't much people, who disable JS, but well I do want my page to be seen by all people in the end. I managed to do it with slider on my page (however I want to use other jQuery effects), but, for example, http://www.flowplaye...ools/index.html doesn't provide any information about this. Try to disable JS and see that nothing works. I can use <noscript></noscript> tag, but I have to make two main pages. And what if I want to view it on one page? What would you do? Regards, Aleks. Hi guys Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately. Below is the script I am using for the entire menu. Code: <html> <head> <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { //Append a div with hover class to all the LI $('#navMenu li').append('<div class="left"><div class="right"></div></div>'); $('#navMenu li').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).children('div').fadeIn('1000'); }, //Mouseout, fadeOut the hover class function() { $(this).children('div').fadeOut('1000'); }).click (function () { //Add selected class if user clicked on it $(this).addClass('selected'); }); }); //]]> </script> <style type="text/css"> #navMenu { margin:0; padding:0; list-style:none; font-family:arial; text-align:center; line-height:60px; } #navMenu li { background-color:Gray; float:left; width:120px; height:40px; line-height:40px; border:solid 1px black; position:relative; } #navMenu li a { z-index:20; display:block; height:40px; position:relative; color:Black; } #navMenu li .left { background-color:Green; position:absolute; width:20px; height:40px; top:0px; z-index:0; display:none; } #navMenu li .right { background-color:Red; position:absolute; width:100px; height:70px; top:0px; z-index:0; display:none; } #navMenu li.selected { background-color:Blue; } </style> </head> <body> <ul id="navMenu"> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> </ul> </body> </html> I would appreciate any help given! Thanks |