|
JavaScript - Jquery To Javascript
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 Similar TutorialsI 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 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 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 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 nevermind i figured it out myself
i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. Hi How do I send an array created in jQuery or Javascript to PHP? (page will be redirected to PHP) I'm thinking of URL parameters right now, but wont that result to a long URL? Is there another optimized way of sending the array? Here's my script. Which doesn't work. Here's my script, this works fine... send_array_to_other_page.html Code: $(function(){
//DECLARE ARRAY
var arr = new Array();
var i = 0;
$('#form').submit(function(e){
e.preventDefault();
var value = $('#box').val();
var index = arr.length;
var list = '';
//ADD VALUE TO ARRAY
arr[index] = value;
//OUTPUT VALUES IN ARRAY
for (var index in arr){
list+=index+': '+arr[index]+'<br/>';
$('#arrLength').html(arr.length);
}
//DISPLAY ARRAY
$('#display').html(list);
$('#form').get(0).reset(); //RESET FORM
});
$('#send').click(function(){
window.location = 'send_array_to_other_page_2.php?list='+arr;
});
});
This doesn't. It outputs Array content lost. Id also like to point out the the url of this page is send_array_to_other_page_2.php. Its missing the ?list= PHP Code: <?php $arr = $_GET['list']; echo 'The contents of the array are still... <br/>'; if(isset($arr)){ print_r($arr); } else { echo 'Array content lost'; } ?> 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 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 being told that a snippet of JQuery code in a website that I have inherited is having problems with a $() JQuery Library Implementation. It seems to keep throwing a "tagName" error. An offered solution was to recode the JQuery into traditional JavaScript using getElementById(). I'm new to JavaScript and clueless to JQuery. I'm not exactly sure how to start. How would something like this be changeable to Javascript? Code: <script type="text/javascript">
$(document).ready(function() {
$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
document.forms["loginForm"].elements.loginUser.focus();
});
$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});
});
</script>
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, 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. 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 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! I'm newbie to javascript. I'm trying to print a web part in landscape orientation. I want to include CSS in java script and change the layout of the page. Here is the print code Code:
function printWebPart(tagid)
{
if (tagid)
{
var html = "<HTML>\n<head>\n"+
$("HEAD").html()+
"\n</head>\n<body >\n"+
$("#"+tagid).html()+
"\n</BODY>\n</HTML>";
var printWP = window.open("","printWebPart");
printWP.document.open();
printWP.document.write(html);
printWP.document.close();
printWP.print();
printWP.close();
}
}
</script>
and here is the css class : .landScape { width: 100%; height: 100%; margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=3); } Please suggest how do i do this? Hi I have a quiz that uses javascript to calculate the scores over 10 pages of a template which uses jquery. I'm having trouble disabling the navigation buttons so that the user cannot move on until they submit the question. The code is in Jquery and Javascript and i'm still learning. I tried this which worked as it stopped them from navigating away from the page but it stopped my quiz from calculating the score too.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
if (flag==false)
{
try {
checkAnswer(document.getElementById('quizForm'))
flag=true;
return false;
}
catch(err)
{
if (err.number !=-2146823281)
{
alert(err.description);
}
}
}
next_page = (current_page + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
This is what the code looks like now without the changes.... Code: //Next Page Function
$('.next').click(function() {
if (current_page == no_pages){
//do nothing
}
else{
next_page = (parseInt (current_page) + 1);
$("#content").fadeOut("slow",function(){
$("#content").load("pages/page_" + next_page + ".html").fadeIn('slow')}
);
current_page ++;
$("#current_page").html(current_page);
progress_bar();
}
});
I was also told to try and disable the button until they click sumbit and then enable it straight away but i'm not really sure what i'm doing. I put this bit together but it doesn't do anything.... Code: else{
if (document.getElementById('quizForm')){
if (document.quizForm.cc.disabled==true)
document.quizForm.cc.disabled=false
else
{return true;}
Any advise? Thanks. Hey, I'm working on a script that uses a function (called on click) to change the content of a div (called description) within the page. It contains an unordered list and list items. The first one has the class "show" and the ID "1", the second with just the ID "2", and so forth. (see code below). I am using jQuery to control the onclick function. the jQuery gets the current object with the "show" class. If there is no show class, it takes the first. It then puts a variable string together that represents the UL LI that is needed to be shown. Code: var descurrent = ($('div#description ul li.show')? $('div#description ul li.show') : $('div#description ul li:first'));
var desclass = '#description li#'+x;
Note: x is a variable transfered from the function change(x); where x is the ID that is to be shown HTML CODE: Code: <div id="description"> <ul> <li class="show" id="1">blahblah </li> <li id="2"> etc </li> </ul> The jQuery i'm trying to get to work is: Code: //Hide the current image
descurrent.animate({opacity: 0.0}, 1000)
.removeClass('show');
//Show new image
$(desclass).addClass('show')
.animate({opacity: 1.0}, 1000);
Note: the class "show" has a higer z-index Thanks in advance, Hope this can be resolved soon, been giving me headaches! Cheers, John Hi, 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. |
|||||||