HELP with conditioning/exiting a function

Hello.

I was writing these functions and I encountered a problem. Description of the problem is commented:

var getWrite = document.getElementById("write");
var getLetterFixed = document.getElementById("letterFixed");
var getLetterSlideBackArrow = document.getElementById("letterSlideBackArrow");
var divIsStickingOutFully = false;

getWrite.onmouseover = function slideABit(){
getLetterFixed.style.bottom = "-575px";
getLetterFixed.style.transition = "bottom ease-in-out 400ms";
}

getWrite.onmouseout = function slideABitBack(){ // ********* how do I exit this function when function slideFull() is activated?
getLetterFixed.style.bottom = "-600px";
getLetterFixed.style.transition = "bottom ease-in-out 200ms";
}

getWrite.onclick = function slideFull(){
getLetterFixed.style.bottom = "0px";
getLetterFixed.style.transition = "bottom ease-in-out 300ms 70ms";
divIsStickingOutFully == true;
}

getLetterSlideBackArrow.onclick = function slideFullBack(){
getLetterFixed.style.bottom = "-600px";
getLetterFixed.style.transition = "bottom ease-in-out 200ms";
}

Code (markup):

I need to exit a particular function after one function is being run. Also, I need to exit it just for that one cycle, meaning that it should run again.
I tried doing it by conditioning with if, else and booleans, but I got lost.

Here is HTML and CSS if needed.

<div id="write"><img src="img/write.png" width="400" height="400"></div>
<div id="letterFixed">
<div id="letterSlideBackArrow"><img src="img/letterSlideBackArrow.png" width="53" height="15"></div>
</div>

Code (markup):

#write{
position:absolute;
right:200px;
top:50px;
cursor:pointer;
}

#letterFixed{
position:fixed;
right:0px;
bottom:-600px;
width:600px;
height:600px;
background-color:#FFF;
z-index:1000;
}

#letterSlideBackArrow{
margin-left:47%;
margin-top:5px;
}

Code (markup):

 

I wish i could help you. I tried to to understand where the problem is but i can not find one.

 

Here is a full description of what it does and what it should do:

Now, when I hover over getWrite, getLetterFixed moves up by 25px, and when I mouseout of getLetterFixed, it slides back, as it should, everything is fine here. Now, when I run slideFull() by clicking on getWrite, getLetterFixed slides up fully to 0px from -600px. And here is the problem: function slideABitBack() is still executed when I move the mouse. There should be a condition like this (I can only write it in a human language it, that's where the problem is): If getLetterFixed has slided up FULLY, function slideABitBack() should be exited/disabled(until I slide getLetterFixed back by clicking getLetterSlideBackArrow).

 

You're dicking too much with it in the scripting, instead of letting CSS do the heavy lifting. The ONLY thing your script "needs" to do is set or remove a class for the clicked/unclicked state. EVERYTHING else goes in the stylesheet. STUNNING example of what I mean by people using JS to do CSS' job.

Set the hover state using :hover in the CSS, swap a class it for it's clicked state, the class in the CSS AFTER the psuedo-state declaration so it overrides the behavior.

Of course if that arrow image only works scripting on, why is it even IN the markup in the first place?

Though all this dicking around with position:fixed and apo without knowing the container status is confusing, and smells slightly of bad markup methodology... particularly the use of margin inside a positioned element, when to be frank I'm not even sure there's a legitimate reason for ANY of those DIV to even exist. It doesn't look like you are doing a blasted thing that couldn't be done to the IMG tags directly. IF I were to wrap them in a tag, it would probably be an anchor so people not using the mouse aren't left high and dry. (usability 101)

Really your entire positioning methodology seems like broken nonsense combining values like top and bottom in manners that shouldn't even be combined that way. That should render four different ways in each of the major browser engines!

Guessing WILDLY:

<img
	src="img/write.png"
	alt="DESCRIBE THIS!"
	width="400" height="400"
 	id="write"
>
<img 
	src="img/letterSlideBackArrow.png"
	alt="Slide"
	width="53" height="15"
	id="letterSlideArrow"
>

Code (markup):

#write {
	position:absolute;
	right:200px;
	top:50px;
	bottom:-600px;
	cursor:pointer;
	transition:bottom ease-in-out 200ms;
}

#write:hover {
	bottom:-575px;
	transition:bottom ease-in-out 400ms;
}

#write.clicked {
	bottom:0;
	transition:bottom ease-in-out 300ms 70ms;
}

Code (markup):

(function(d){

	// some handy helper functions

	function classExists(e, className) {
		return RegExp('(\\s|^)' + className + '(\\s|$)').test(e.className);
	}

	function classAdd(e, n) {
		if (!classExists(e, n)) e.className += (e.className ? ' ' : '' ) + n;
	};

	function classRemove(e, n) {
		e.className = e.className.replace(
			new RegExp('(\\s|^)' + n + '(\\s|$)'),' '
		) . replace(/^\s+|\s+$/g,'');
	};

	function eventAdd(e, eventName, handler) {
		if (e.addEventListener) e.addEventListener(eventName, handler, false);
			else e.attachEvent('on' + eventName, handler);
	}
	
	function eventPrevent(e, prevent, deselect) {
		e = e || window.event;
		if (!e.target) e.target = e.srcElement;
		if (prevent) {
			e.cancelBubble = true;
			if (e.stopPropagation) e.stopPropagation();
			if (e.preventDefault) e.preventDefault();
			e.returnValue = false;
		}
		if (deselect) {
			if (window.getSelection) window.getSelection().removeAllRanges();
			if (d.selection) d.selection.empty();
			e.target.blur();
		}
		return e;
	}
	
	// our actual functionality
	
	var
		imgArrow = d.getElementById('letterSlideArrow'),
		imgWrite = d.getElementById('write');
		
	function clickArrow(e) {
		eventProcess(e, true, true);
		classAdd(imgWrite, 'clicked');
	}
	
	function clickWrite(e) {
		eventProcess(e, true, true);
		classRemove(imgWrite, 'clicked');
	}
		
	eventAdd(imgArrow, 'click', clickArrow);
	eventAdd(imgWrite, 'click', clickWrite);
	
})(document);

Code (markup):

Is how I'd go about something like that -- though to be frank your positioning methodology is such needlessly complicated gibberish, I'm really not sure what you are even trying to accomplish. Good rule of thumb though? If you are using JavaScript to access the .style property to set a fixed value, you are probably doing something WRONG.

... and I'd have to see the page in question, but I suspect given your positioning methodology you're doing something equally wrong there.

-- edit -- oh wait, I... almost see what you have the first DIV for, you're chopping off the image when you size it's parent?

GAH, my eyeballs bleed just looking at that. Pretty sure you've over-thought whatever it is you are actually trying to do.

 

I have solved it with JS.

You rubbed my face in my n00bAss function/CSS writing proper. I am a newb with WEB design, so forgive me that.
Since I am more of a graphic designer than a WEB designer, I write what is closest to my logical understanding of CSS and HTML.

I have never ever seen such thing as
#write.clicked { in CSS.

And I would never think I could achieve this functionality without JS.

 

Don't take it personally, we all start somewhere.

That would explain your positioning methodology -- if you come from tools like Photoshop or Illustrator, the idea of "dynamic" elements and "flow" are relatively alien. A lot of people making the transition from graphic arts to web make the same type of false assumptions about site building.

"clicked" is just a class that's added and removed by the scripting, so the CSS can do the heavy lifting. Same as if the markup was <div class="clicked">. Swapping the class in the JS means you have full style control on the CSS side, which is where styling belongs.

A LOT of what people resort to JS for really isn't JavaScript's job. It's a easy mistake and why 99% of the time someone chimes in with "Just use jQuery" you probably shouldn't. While the JS in my post is big thanks to helper functions, the code that runs when the user interacts is really simple -- it just traps the click to add or remove that class instead of playing with the CSS directly. This can be really handy if you want to re-use that same script across multiple elements that have the same "states" of clicked/unclicked,

The :hover part? That is most always CSS' job. If you see someone assigning onhover in JavaScript, they're probably doing something wrong. SADLY a lot of tutorials are filled with endless pointless "onevent" hooks, sometimes putting them in the markup -- and that's a significant contributor to slow loading poorly coded sites.

Laughably if you don't mind the page scrolling to the element, you could even implement the clicked state without scripting using the :target attribute, at least in "modern" browsers. I probably wouldn't use that route for this, but in the case of those "hide the menu with a hamburger icon" things, the method used by most frameworks like bootcrap is mind-numbingly dumbass stupid... since all you need is two anchors inside a div:

<div id="mainMenu">
  <a href="#mainMenu" class="showMenu"></a>
  <a href="#" class="hideMenu"></a>
  <ul><!-- menu li go here -->

Code (markup):

in the CSS that's

#mainMenu ul,
#mainMenu .hideMenu,
#mainMenu:target .showMenu {
  display:none;
} 

#mainMenu:target ul,
#mainMenu:target .hideMenu {
  display:block;
}

Code (markup):

You'd just plug in the hide/show text using generated content, and have scripting trap those two anchors to use window.location.replace instead of normal function so the new URI doesn't get added to the history. FAR simpler and far cleaner markup than what you see people doing with scripting for it, and it WILL still function if JavaScript is blocked, disabled or otherwise unavailable...

Since remember the unwritten rule of JavaScript -- if you can't make a fully functional page without JavaScript FIRST, you likely have no business adding JavaScript to it.

... a lesson currently lost as people sleaze scripting into pages any old way with zero concerns if the result is actually useful to all users.

There's a reason I say that 99% of what people do with the mouth breathing idiocy known as jQuery falls into three categories:

1) stuff that would be smaller and simpler and less code without the framework, NOT counting the size of the frameworks against it.

2) stuff that's CSS' job.

3) Stuff that has no blasted business on a website in the first place.

... and even with pure plain JavaScript, those last two apply to 90%+ of what people are doing out there with scripting.

 

Thanks a lot for your insights and advice on JS and CSS.

I wouldn't/couldn't yet use any of JS you posted above, because I don't understand almost any of it. As for JQuery, I don't like it, and I don't like the fact that it is so popular. Altho, I am not aware of situations where it may be handy.

I'll keep your advice in mind next time when making similar stuff. Thanks again!

 

I did some research on CSS only dynamic styles and HOLY SHIT, I knew it was powerful, but I didn't know it was THAT powerful. Thanks again for directing me to this. Gonna be learning whole more CSS3 now.

 

that's the reaction I had about 13 years ago with CSS2. SO much of the stuff people dive for JS for is more work and more code using JS -- but because prior to ~2001ish things like hover weren't "real world deployable" as we still had to support Nyetscape 4 users, a lot of tutorials online remain in "web rot" state and it continues to be promoted as how to do things.

See dreamweaver's legacy macromedia mm_swap idiocy -- that's just JS doing CSS' job.

When you start realizing just how much CSS can do, you start to question "why am I even putting scripting on the page".

That's when a number of the sayings you hear but question start to click -- like "If you can't make a fully functioning page without scripting FIRST, you likely have no business adding scripting to it". So many people now dive for JS for things that either isn't it's job, or just makes the site harder to maintain and pisses all over accessibility.

Which is NOT me saying "Don't use JavaScript", it's just that good scripting should enhance a page's functionality, not supplant it -- and it certainly shouldn't be the first tool you dive for when doing things on a site.

CSS3 really being a game changer as in some ways it's not only making a lot of what people do with JS look silly, it's also butting heads with flash, <canvas> and SVG. That's where stuff can get REALLY interesting.

That "Holy ****" reaction? That's me a decade ago.