Web Dev Questions That Don't Need Their Own Thread v4 - Developers

first, was h1 display hidden? it needs to be you should put script inside <head> or the bottom of <body>

@Moofy You can't have code inside script tags that have a source set. Also instead of using display:hidden; to hide the h1 tag initially, you should use the opacity property and animate it, this way the layout of the document doesn't change. Setting the opacity to 0 using javascript instead of in CSS means that users with javascript disabled can still see the element which is good for accessibility. [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('h1').css('opacity', 0).animate({ opacity: 1 }, 'slow' ); }); </script> </head> <body> <h1>Facepunch</h1> </body> </html> [/code]

[QUOTE=CBastard;42677542]@Moofy You can't have code inside script tags that have a source set. Also instead of using display:hidden; to hide the h1 tag initially, you should use the opacity property and animate it, this way the layout of the document doesn't change. Setting the opacity to 0 using javascript instead of in CSS means that users with javascript disabled can still see the element which is good for accessibility. [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('h1').css('opacity', 0).animate({ opacity: 1 }, 'slow' ); }); </script> </head> <body> <h1>Facepunch</h1> </body> </html> [/code][/QUOTE] Why not the .fadeIn, I found it on the jQuery API? :suicide:

[QUOTE=Moofy;42677597]Why not the .fadeIn, I found it on the jQuery API? :suicide:[/QUOTE] Because display:none; which is what you probably would have used to hide it in the first place removes the element from the layout of the document; opacity:0; on the other-hand just makes it invisible. If you have something sat below the H1 tag then it will move down once you begin the fadeIn which can be jarring. It's not really apparent with very minimal examples like this, it shows up much more clearly on sites with lots of content and javascript running so it's good just to get into the habit of doing it. [IMG]http://i.imgur.com/Nd1Tewn.png[/IMG] [B]Edit:[/B] fixed the image

[QUOTE=CBastard;42677714]Because display:none; which is what you probably would have used to hide it in the first place removes the element from the layout of the document; opacity:0; on the other-hand just makes it invisible. If you have something sat below the H1 tag then it will move down once you begin the fadeIn which can be jarring. It's not really apparent with very minimal examples like this, it shows up much more clearly on sites with lots of content and javascript running so it's good just to get into the habit of doing it. [IMG]http://i.imgur.com/wpDCVvh.png[/IMG][/QUOTE] Makes sense. I'll try it out until it's stuck in my head!

Okay so I tried it out now and it doesn't work. The code provided: [code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('h1').css('opacity', 0).animate({ opacity: 1 }, 'slow' ); }); </script> </head> <body> <h1>Facepunch</h1> </body> </html> [/code] It won't fade when the DOM is finished loading. I looked up and down to find what's wrong and I simply can't find it? I'm using Firefox if that's the problem, but it shouldn't be. God damn automerge not working..

It kindof looks like it though? [url]http://jsfiddle.net/MLTCm/[/url] Also automerge doesn't work if your last post was older than a few hours (2 or 3 I think).

[QUOTE=eternalflamez;42687733]It kindof looks like it though? [url]http://jsfiddle.net/MLTCm/[/url] Also automerge doesn't work if your last post was older than a few hours (2 or 3 I think).[/QUOTE] Works on JSfiddle apparently, not when I open from my editor to the browser? :suicide:

This part: [code] <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/code] Is all wonky, this url doesn't actually work for me. Replace by [code] <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> [/code] That seems to work for me.

...That way, though, you'll need to change it to https:// if you ever go that way, unless you want warnings about non-secure elements. 'Changing' it automatically is what not adding anything before the // does. It's pretty weird that you can't get it to work. (maybe console logs any error?)

Literally copy pasting what he has just gives 2 errors, 1 stating "Failed to load resource " about the jquery page, and the other about $ not being defined, which means that jquery indeed didn't load. This is after a long loading time by the way. Using that link I posted, makes the whole script work for me.

This seems quite unstable, perhaps just download jQuery? This, fuck this. [t]http://i40.tinypic.com/2m3s1o8.png[/t]

[QUOTE=Moofy;42688063]This seems quite unstable, perhaps just download jQuery?[/QUOTE] Google's CDN is very reliable, your best bet is to just leave it set as https since you wont get a warning when the site is over http or https and will work in a local .html file [CODE]<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/CODE]

[QUOTE=eternalflamez;42687835]This part: [code] <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/code] Is all wonky, this url doesn't actually work for me. Replace by [code] <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> [/code] That seems to work for me.[/QUOTE] That URL is fine... [url]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js[/url] Omitting the http: and just using // just tells the browser to use whatever protocol the current page is using. If you don't omit the http: and you switch to SSL, or have some pages that use SSL, you will have to make sure to switch EVERYTHING that starts with http: on the page to https: otherwise you will get security warnings.

[QUOTE=Moofy;42688063]This, fuck this. [t]http://i40.tinypic.com/2m3s1o8.png[/t][/QUOTE] That actually happens a lot more in this section than the others, it seems.

[QUOTE=gokiyono;42696295]That actually happens a lot more in this section than the others, it seems.[/QUOTE] I think it does that when you post a lot on a single page it will take it as spam, just annoying writing a long post and this prompts, sometimes it freezes in it and my post won't be posted even if I do the captcha. [editline]30th October 2013[/editline] [QUOTE=KmartSqrl;42689107]That URL is fine... [url]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js[/url] Omitting the http: and just using // just tells the browser to use whatever protocol the current page is using. If you don't omit the http: and you switch to SSL, or have some pages that use SSL, you will have to make sure to switch EVERYTHING that starts with http: on the page to https: otherwise you will get security warnings.[/QUOTE] So using the Google CDN always use [B]https://[/B]?

why not just use css3 animation? [url]http://lw2.co.uk/[/url] [url]http://lw2.co.uk/style.css[/url] actually come to think of it i have done something quite horrible as the fadein will never happen on an old browser, and it will always be 0 opacity (?) unless there's a hack to fix that

Has anyone messed around with Google Analytics API before? I'm trying to make a Anaytics Dash that includes GA with some other relevant tables and things that don't have anything to with GA. I've set up the Client ID, and the API Key for the Browser, and all of that. When I open up the file I used for [url=http://analytics-api-samples.googlecode.com/svn/trunk/src/reporting/javascript/ez-ga-dash/docs/user-documentation.html#register]this[/url] tutorial in my browser, it shows me the "Authorize Analytics" button, then starts loading something, but then stops. I just click the button and the page loads again, but it loads completely blank. If I go to the source, I can see all the code, but nothing is being rendered. It is supposed to render a graph showing visitors over time, but I get a blank page! [B]sample.php[/B] [code] <!DOCTYPE> <html> <head><title>GA Dash Demo</title></head> <body>  <button id="authorize-button" style="visibility: hidden"> Authorize Analytics</button>  <div id='line-chart-example'></div>  <script src="https://www.google.com/jsapi"></script> <script src="gadash-1.0.js"></script> <script src="https://apis.google.com/js/client.js?onload=gadashInit"></script> <script> // Configure these parameters before you start. var API_KEY = 'Enter Your API Key Here'; var CLIENT_ID = 'Enter Your Client ID Here'; var TABLE_ID = 'Enter your Table ID here'; // Format of table ID is ga:xxx where xxx is the profile ID. gadash.configKeys({ 'apiKey': API_KEY, 'clientId': CLIENT_ID }); // Create a new Chart that queries visitors for the last 30 days and plots // visualizes in a line chart. var chart1 = new gadash.Chart({ 'type': 'LineChart', 'divContainer': 'line-chart-example', 'last-n-days':30, 'query': { 'ids': TABLE_ID, 'metrics': 'ga:visitors', 'dimensions': 'ga:date' }, 'chartOptions': { height:600, title: 'Visits in January 2011', hAxis: {title:'Date'}, vAxis: {title:'Visits'}, curveType: 'function' } }).render(); </script> </body> </html> [/code] Does anyone have any idea what is wrong here? [editline]30th October 2013[/editline] Let it be known, I've replaced the placeholder variables in the above code to reflect my own IDs and Key

[QUOTE=Moofy;42696573]I think it does that when you post a lot on a single page it will take it as spam, just annoying writing a long post and this prompts, sometimes it freezes in it and my post won't be posted even if I do the captcha. [editline]30th October 2013[/editline] So using the Google CDN always use [B]https://[/B]?[/QUOTE] No, just use //

[QUOTE=KmartSqrl;42702258]No, just use //[/QUOTE] But that's what I did and it didn't work. That was the problem all along :v: [editline]31st October 2013[/editline] Also any suggestions for where to start when you're new to jQuery?

[QUOTE=Moofy;42709100]But that's what I did and it didn't work. That was the problem all along :v:[/QUOTE] Can you check in a console using firebug (seeing you use firefox) why it's not loading? usually there's an error for those kind of stuff that shows up.

[QUOTE=Moofy;42709100]But that's what I did and it didn't work. That was the problem all along :v: [editline]31st October 2013[/editline] Also any suggestions for where to start when you're new to jQuery?[/QUOTE] What happens if you change the 'slow' to 10000?

Can anyone point me in the right direction? I need to create a user registration/login system using XML to store the data. Single file, not one file per user.

[QUOTE=SammySung;42709213]Can anyone point me in the right direction? I need to create a user registration/login system using XML to store the data. Single file, not one file per user.[/QUOTE] If I was forced not to use a database I would use JSON before using XML.

Has anyone used this? [url]http://www.google.co.uk/webdesigner/[/url] Any good for mobile sites?

[QUOTE=CBastard;42709540]If I was forced not to use a database I would use JSON before using XML.[/QUOTE] Well that's not what my uni degree wants me to do.

I created a script that loops throught input elements and checks if the values are valid. If they are adds a class to paint the input green, if they are not it either paints it the default color or warns the user with red color. [url]http://jsfiddle.net/Euphe/QhpfH/[/url] Is it a good way to do such a thing? Won't such a loop be intensive for the browser?

Hi, im trying to get some data from a webpage with jQuery (Im a noob with it) but im having problems to choose the correct selectors. I need the name, mail and department fields. [CODE] var $ = window.$; document.body.removeChild(script); var links = []; $('.cont-interesado').each(function(i, el){ var $originalThis = $(this); links.push({ name: $(this).filter('.top').find(".info1").children('strong').html(), mail: ? , departamento: $(this).siblings(".col-der").siblings(".top").siblings(".info2").children('a').trim() }); }); fs.writeFileSync('./links.json', JSON.stringify(links, null, ' ')); appjs.exit(); };[/CODE] Here is the html source. [CODE]<div class="cont-interesado"> <div class="col-izq"> <div class="check"> <input type="checkbox" value="10283400" name="chk" id="chk" /> </div> </div> <div class="col-der"> <div class="top"> <div class="info1"> <strong>ubaldo</strong> | <a href="mailto:example@hotmail.com">example@hotmail.com</a> | (11) 555 <p>04/06/2013 23:28hs</p> </div> <div class="info2"> <a target="blank" href=""> DEPARTMENT </a> </div> </div> <div class="middle"> <div class="info1"> <div> Alquiler - Departamentos | <p class="act">Aviso Activo </p> </div> <div class="rig"> <p class="ri"> <b>Código:</b> 3247066 </p> </div> </div> </div> <div class="bottom"> <div class="info1"> <p><b>Comentario:</b> HOLA ESTOY INTERESADO EN EL APTO, ME GUSTARIA VERLO</p> </div> <div class="info1"> <input type="text" value=""Dejar una nota"" id="note10283400" name="note10283400" maxlength="200" onclick="javascript:changeClassField('note10283400', 'postContactSaveNote10283400');" onblur="javascript:document.getElementById('postContactSaveNote10283400').className='new_btn left';" > </div> <div class="info2"> <button value="Guardar" type="button" class="new_btn left" onclick="postContactSaveNote('10283400', 'note10283400', '/zp/myaccount/postcontact/saveNote.htm');" id="postContactSaveNote10283400" name="postContactSaveNote10283400"><span>Guardar</span></button> </div> </div> </div> </div>[/CODE]

Edit; didn't notice this new page: [QUOTE=MuffinZerg;42710537]I created a script that loops throught input elements and checks if the values are valid. If they are adds a class to paint the input green, if they are not it either paints it the default color or warns the user with red color. [url]http://jsfiddle.net/Euphe/QhpfH/[/url] Is it a good way to do such a thing? Won't such a loop be intensive for the browser?[/QUOTE] Why use setInterval when you could just use an onchange method? [code] $("input").on('change', checkForms);[/code] instead of the setInterval. [editline]31st October 2013[/editline] [QUOTE=ncls_hv;42710806]Hi, im trying to get some data from a webpage with jQuery (Im a noob with it) but im having problems to choose the correct selectors. I need the name, mail and department fields. [CODE] code [/CODE][/QUOTE] Uh I don't get why you would be able to use such nasty selectors such as "$(this).filter('.top').find(".info1").children('strong')" but not simple ones. Instead you could give the element that surrounds the text that you want, an id and select on that. [code]  <p id="an_id">text</p>  <p class="classname">text</p>  <p>text</p> [/code] There's a bunch more options but those are generally the mosed used ones.

[QUOTE=Moofy;42709100]But that's what I did and it didn't work. That was the problem all along :v: [editline]31st October 2013[/editline] Also any suggestions for where to start when you're new to jQuery?[/QUOTE] That should only happen if you're viewing an html file directly on your HD instead of through a local webserver because then it will try to pull it down from the google CDN with the file: protocol, which won't work. I think you should always be working through a local webserver anyways though because I've run in to weird issues viewing files directly in the past.