ghqwerty's Profile User Rating: -----

Reputation: 43 Craftsman
Group:
Contributor w/DIC++
Active Posts:
889 (0.43 per day)
Joined:
08-August 08
Profile Views:
7,146
Last Active:
User is offline Sep 13 2013 10:15 AM
Currently:
Offline

Previous Fields

Country:
GB
OS Preference:
Windows
Favorite Browser:
FireFox
Favorite Processor:
Intel
Favorite Gaming Platform:
XBox
Your Car:
Who Cares
Dream Kudos:
100

Latest Visitors

Icon   ghqwerty has not set their status

Posts I've Made

  1. In Topic: Preloader in modal popup not disappearing

    Posted 28 Aug 2013

    I had just written out a reply and my browser crashed before i could send... That's annoying.

    OK, so basically i have an admin page and on it is a list of users. I want to be able to click on a users name and have it load a popup, make an ajax call and populate the popup with this information. Whilst it is making the call though i would like for a preloader to be shown (i have a small gif/jpeg file with a rotating circle in it for this)

    Here is the code for the HTML of the popup
    echo '<div id="profilePopup">
    						<a class="popup-close">X</a>						
    							<img src="images/LoadingImg.gif" id="preLoader" style="display:none;"/>
    							
    						
    					</div>';
    

    This is hidden by default by the following CSS:
    #profilePopup	{
    	background-color:#fff;
        border-radius:15px;
        color:#000;
        display:none; 
        padding:20px;
    	/* min-height: 60px;
    	min-width:	120px;
    	max-width: 75%;
    	max-height: 75%; */
    	width:510px;
    
    }
    


    I realised in my previous code that by using

    Quote

    $(this).toggle().css({ 'display':'block'});
    

    I would always be setting the display to block and not allowing it to be hidden.

    I now have:
    $.fn.togglePreloader = function (){
    		if ($(this).css('display') == 'none'){
    			$(this).show().css({
    					"margin": "10px auto",
    					"display": "block" });
    		} else {
    			$(this).hide();
    		}
    	
    		console.log($(this).css('display'));
    	return this;
    };
    


    This now works THE FIRST TIME i click on a name, however, after that neither the preloader or the close button is displayed (it shows up as just a small square). The ajax call still works and within a couple of seconds the popup is populated with data - still without the close button though.
    I reckon this could be how the popup is closing itself though.
  2. In Topic: Preloader in modal popup not disappearing

    Posted 27 Aug 2013

    That is for closing the popup itself. The pre-loader is just an image inside the bPopup (#profilePopup on mine). Although my next thought was to, in the callback, close the whole popup and open a new one with the loaded data and no pre-loader img. But i would much rather just fix this if possible.
  3. In Topic: Event not triggering function

    Posted 11 Aug 2013

    Bingo! I actually tried that myself with no luck, but had omitted the # identifier... It works now, FINALLY!

    Thank you
  4. In Topic: Event not triggering function

    Posted 11 Aug 2013

    OK, so i only briefly skimmed that, but i ammended the code as follows:

    $("#submitUpdate").on("click",
    			function(){
    
    


    and still no luck.

    Also, i have only just started using jQuery so i haven't converted anything yet. I am still unsure as to how exactly it all meshes together. I originally thought it could all just be used interchangeably, but then stuff like ".value" having to be ".val()" led me to hesitations about mixing the 2 formats in the same function.
  5. In Topic: Event not triggering function

    Posted 11 Aug 2013

    Haha, not a problem! And i was only using W3Schools since that's where I originally read about it.

    Trust me, I am not fiddling with the library code one bit! that just happened to be where my magical mystery tour took me when stepping over code :P/>/>

    As for the console though, there appears to be no errors (apart from a couple of css warnings which shouldn't matter at all)

    Problem:
    So seeing as there appears to be nothing 'faulty' about what i have written i decided to try and check whether it was in fact my first theory. I changed the "#submitUpdate" identifier for a simple "p" and both functions worked fine. So the issue lies somewhere in the fact that the submitUpdate button is generated by the javascript AFTER the page has loaded.

    Since i already have a div in place from page load called "submitAnchor" i can use this id as a reference/workaround for the time being. But it would be nice to know of a more direct solution if there is one?


    Edit:
    Although the issue isn't in here, here's my changeToForm function. It is less than elegant to say the least and i'm sure there is probably a jQuery functon to do this more concisely but oh well, it works:
    function changeToForm(ID){	
    	//set a list of elements	
    	//check whether the target is already in form format when edit clicked
    		//yes -> revert to display mode
    		//no -> change to form mode	
    	if (!document.getElementById(elements[0]+"Form"+ID)){
    		//switch to form mode
    		//alert("Display mode");
    		for (var ii = 0; ii < elements.length; ii++){
    			//if there's data for a row, store it for later
    			if(document.getElementById("formElem"+elements[ii]+ID)){
    				prevContent[ii] = document.getElementById("formElem"+elements[ii]+ID).textContent;
    				document.getElementById("formElem"+elements[ii]+ID).innerHTML = '<input id="'+elements[ii]+'Form'+ID+'" type="text" value="'+prevContent[ii]+'" class="slimline" />';
    			} else {
    				//if not, store nothing as a place holder
    				prevContent[ii] = "";
    			}			
    		}		
    		//append the submit button to the end
    		document.getElementById("submitAnchor"+ID).innerHTML += '<input id="submitUpdate" type="button" value="Update Details" class="float-right"/>';
    	} else {	
    		//already in form mode, switch back to display mode
    		//alert("Form Mode");
    		for (var ii = 0; ii < elements.length; ii++){			
    			if(document.getElementById("formElem"+elements[ii]+ID)){
    				document.getElementById("formElem"+elements[ii]+ID).innerHTML = prevContent[ii];
    			}			
    		}		
    		remove("submitUpdate");		
    	}
    	
    	return true;
    }
    
    


    Edit 2:
    I am more than positive that the entirety of the internet would be a lot more concise if we didn't have to account for IE's 'weirdness'. At least up untill IE8/9 when they started to get their act together

My Information

Member Title:
if($spareTime > 0){ $this->writeCode(); }
Age:
Age Unknown
Birthday:
Birthday Unknown
Gender:
Location:
study room
Years Programming:
2
Programming Languages:
php, css, html
learning - c#, javascript, jquery(javascript), ajax

Contact Information

E-mail:
Click here to e-mail me

Friends

Comments

ghqwerty has no profile comments yet. Why not say hello?