1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Div changer issue

Discussion in 'CSS' started by jazzzyman, Nov 19, 2014.

  1. #1
    Hey guys im having an issue with this div content switcher.
    When i click the button on the right to change the content, the content appears outside the div named something. The original content that loads is in the div but not the changed content.
    Ive tried fiddling with everything i can think of and even asked a few people but they cant figure out why when the code parses the something div contains no content.
    I think it might also be whats causing the button on the right to sit so far right once the div content is swapped although i havent looked too much into that one.

    Heres a link to the pen, sorry its a bit rough http://codepen.io/anon/pen/bNNreX
     
    jazzzyman, Nov 19, 2014 IP
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    Abit rough is an understaement, and from that I do not have a clue what you are actually attempting. A link to the page would be more of an aid.
     
    COBOLdinosaur, Nov 20, 2014 IP
  3. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    It aint that bad.
    If you load the pen and click the small button on the right, it loads a new div in place of the current div. (as it should)
    When the new div loads, the div named something gets parsed as containing no content.
    You can see this as the blue background of the something div is now above the content rather then the content being inside the something div.
    So when the button is clicked and the div swaps it should be inside something div rather than parsing as if the something div is empty.
     
    jazzzyman, Nov 20, 2014 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Tables for layout, onevent attributes instead of the script hooking itself in, scripted events doing CSS' job -- it's really quite bad... terrifyingly so in fact.

    Really as to your issue though, it sounds like you're trying to do some sort of goofy scripttardery -- though nowhere are you actually hooking to the script that does your DIV swapping! I don't see that routine actually being called anywhere; the ONLY reason the links are doing anything is that they're just going for normal anchor behavior page-loads.

    Not sure what you're trying to accomplish, but what you have so far? Pitch it.
     
    deathshadow, Nov 20, 2014 IP
  5. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    I love how tables for layout gets your type so worked up.
    I really hope my code doesn't wake you in a cold sweat deathshadow.

    For someone who never seems to be satisfied with other peoples code you certainly love to have your say throughout this forum, even when 90% of it has nothing to do with the answer. I guess some of us just have a need to be heard.

    The css gods must be appalled at some of the techniques being used by the lesser coders beneath your feet.

    Im not sure how much more i can simplify what im trying to do so that you understand. Ive stated it twice. Why is the div .something parsing as empty, rather then containing the code that is clearly inside it in the pen.
     
    jazzzyman, Nov 21, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Well, lemme dig deeper. I find codepen's crappy little boxes next to useless for looking at code -- much less the illegible colours -- so copy from the bottom frame's source and one problem is apparent... your lack of anything resembling good indentation practices has left you with unclosed TD and unclosed TR, and it is near impossible to tell what DIV are being closed when you close them.

    Though as to your DIV.something not showing it's contents, you've got the only real content table.menu set to position:absolute and visibility:hidden, but have NO code for actually making it show. Worse, you've set the font-size to 0px, so what exactly are you expecting it to show?

    Not only are all those "DIV for nothing" impossible to mouseover in the first place, nowhere do you actually HAVE the showmen/hidemenu functions in your scripting -- but again NOT that you should even be trying to use onmouseover/onmouseout since 1) if you were to use scripting the script should hook the markup not the other way around, and 2) something as simple as a menu hover effect is CSS' job!

    You wonder why tables for layout and code bloat get the ire of people like myself up? Simple, your needlessly pointlessly convoluted code makes it harder to diagnose what the devil it is you're even trying to do much less what's going wrong. Even setting aside the tables for layout you've got endless pointless garbage code bloat that makes it a confusing hard to follow mess.

    For example:

    <table class="menu" id="Graphic-Design">
    <tr><td class="menu"><a href="hd-tropical-island-beach-paradise-wallpapers.htm">
      <img class="dropimg" src="thumbs/hd-tropical-island-reflections-beach-wallpaper-1920x1200_small.jpg"></a></td><td class="menu">
      <a href="hd-garfield-and-friends-comic-desktop-wallpapers.htm">
      <img class="dropimg" src="thumbs/garfield-desktop-wallpaper-face-2362x1477_small.jpg"></a></td></tr>
    Code (markup):
    If every single child tag of a like type is gettin the same class, NONE of them need classes. This makes td.menu and img.dropimg pointless code bloat. Get rid of them. No matter what the ignorant halfwits who crap out templates for turdpress might claim.

    padding-top:4px;
    padding-bottom:4px;
    padding-right:none;
    padding-left:2px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    border-top-right-radius:8px;
    border-top-left-radius:8px;
    Code (markup):
    Use the condensed properties!

    padding:4px 0 4px 2px;
    border-radius:8px;
    Code (markup):
    .something { text-align:center; font-size:0px; letter-spacing:0px; word-spacing:0px;border: 2px solid #006699;
    Code (markup):
    Maybe if you hadn't stuffed everything onto one incomprehensible line you'd notice that font-size:0px making it so the only thing that should show is the border.

    	a:link {font-family: "tahoma"; font-size:14; color: #FFA500;}
    	a:visited {font-family: "tahoma"; font-size:14; color:#FFC75E}
    	a:hover {font-family: "tahoma" ;color:white; font-size:16;}
    	a:active  {color: #71A00E; font-family: "tahoma"; font-size:14;}
    Code (markup):
    Fourteen and Sixteen what? PX? EM's? EX? MM? Quijada's? Double boulder shoulder holsters? Much less your lack of fallback families, forgetting entirely about inheritance, resetting the line-height, the train wreck changing font-size with a hover effect typically is, yadda, yadda, yadda. WHY do people write CSS like that?!? Also not sure why you'd send it being followed (active) a different color than hover, and where's focus for keyboard? Check this:

    a {
    	font:normal 100%/120% tahoma,helvetica,sans-serif;
    	color:#FFA500;
    }
    
    a:visited { color:#FFC75E; }
    a:active { color:#71A00E; }
    
    a:focus,
    a:hover { color:#FFF; }
    Code (markup):
    It's called inheritance...

    Not that you should probably even be setting ANY font properties since you should be inheriting that off body -- though declaring that 0px on .something right well plows any chance of actually using EM's like a good little dooby.

    Of course the other reason tables for layout sucks is that you've basically painted yourself into a corner withh a fixed width instead of dynamically re-arranging content. Fixed width layouts are inaccessible trash and anyone telling you otherwise or encouraging development methods like this has packed you so full of sand you could change your name to Sahara. How exactly is that going to re-arrange itself to fit when the display is smaller if you hardcode the appearance in the markup? Again, if you choose your HTML tags based on their default appearance, you're choosing all the wrong tags for all the wrong reasons!

    You have no scripting to make it show, CSS designed to make it not show -- so just what exactly are you expecting this wreck of how NOT to code a website to actually do other than not show anything more than that element's 2px border? What you are asking for seems to have nothing to do with the code you presented, as there is NOTHING there to make your anchors do ANYTHING to div.something to correct it's "I'm not going to show anything" behavior.... I'm thinking it's either incomplete, or you don't grasp how to use JS or CSS; The JS that looks like it would be doing CSS' job only supporting said conclusion.

    You know what I get a kick out of -- when people come into a forums with markup vomited up any-old-way 1997 style, then don't understand why people say "A bit rough is an understatement, and from that I do not have a clue what you are actually attempting." -- honestly he was being far too polite about it.
     
    Last edited: Nov 21, 2014
    deathshadow, Nov 21, 2014 IP
    COBOLdinosaur, kk5st and malky66 like this.
  7. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #7
    I was too polite, and after seeing the childish response to legitimate criticism of a load of trash let me change my response to:

    Dump the load of garbage instead of inflicting it on a world that is already full of toxic waste. If you are thinking of a career in web development may I suggest you instead apply to Burger King so you don't starve to death trying to peddle that junk.
     
    COBOLdinosaur, Nov 21, 2014 IP
    malky66 likes this.
  8. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #8
    I love how criticism gets your type all worked up, if you can't take the advice of someone who knows what they're talking about...don't ask for advice.
    It's not working because the code's a broken pile of shit, work it out for yourself.
     
    malky66, Nov 21, 2014 IP
  9. jazzzyman

    jazzzyman Well-Known Member

    Messages:
    117
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #9
    legitimate criticism mostly meaning changing things that work fine to suit your way of doing things. Removing a couple
    of lines of code by simplifying it, use css instead of blah blah blah, indent to make it more readable, dont use tables
    because tables wernt designed to be used that way,

    0px being the cause? if 0px was the cause then it wouldnt be showing before the swap.

    As i mentioned about the problem i was talking about and not what you decide to mention which isnt affecting my issue:
    Tr td and missing js are just a few things that have been left out in the code copy and arent needed to show my prob.
    Did you stop and think that maybe the js was left out on purpose and exists along with other missing things on
    the actual page copy.

    .something { text-align:center; font-size:0px; letter-spacing:0px; word-spacing:0px;border: 2px solid #006699;

    How is this incomprehensible? think your just nit picking seeing anyone can read that.

    the link, visited, hover and active work how i intend them too.

    As for the tables images not being able to adjust to the users screen.

    If your bothering to adapt to users with screens smaller than say 120px then your just wasting your time

    People like you guys just like to nit pick at everything, even if its not relevant to the issue and is entirely
    a matter of opinion rather than necessity.

    malky: theres a difference between criticism and a complete lack of people skills here and dont think im at all worked
    up over anything thats been said.

    cobol: everything i have in place on my site bar this issue (the part i consider a prob) works as intended and leaves a
    great deal of time to content creation which has resulted in "a lot" of targeted traffic. So i dont think that your
    burger king line will be happening anytime soon.

    With a know it all attitude like that then i doubt you guys will
    last long at a coding firm yourself.

    While you guys do raise some alternative ideas which hold some merit, basically everything you've bothered to
    write is irrelevant. Although being that stuck in your way with those huge egos i doubt you will ever see that.

    So do me and yourself a favor and try resisting the urge to answer my posts with your head in the clouds.. answers?
     
    jazzzyman, Nov 21, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    You really don't grasp CSS at all.

    .something -- font-size:0px;

    .top_grow .text -- font-size:11px; This will show.

    table.menu -- font-size:100%; uhm...DO THE MATH. 100% of zero is still zero.

    ... and if you bothered using a document inspector you'd notice that. NOT that you should need a document inspector like firebug since if you used all those good practices that have been mentioned in this thread instead of burying your head in the sand and saying "IS NOT!!!" the only thing you'd need tools like that for is cleaning up other people's messes.

    The mere fact you're declaring fonts in pixels when there's no image replacement or min-height layout involved means you aren't grasping even the simplest of accessible design concepts. You're "120px" means you didn't even understand what you are being told since you're forcing sideways scrolling at 1280 wide!

    But apparently you just want to sleaze things out any old way, using broken methodologies GUARANTEED to let you make mistakes, not even grasp the mistakes you are making resulting in websites that nobody would want to put up with as a visitor. You don't want to listen to actual advice from multiple people who know WAY more about this than you do... good luck with that. Have fun with your sloppy, bloated coding practices that are by their very nature prone to forcing you to make the silliest of mistakes and dumbest of decisions.
     
    deathshadow, Nov 22, 2014 IP
  11. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #11
    @jazzyman,
    What planet have you been living on. I will just point out that garbage in; garbage out is why you have to spend time on trying to do a very simple function and need to come to the site for help fixing the trash. If the page followed best practice, what you want to do takes about 2 minute to implement, but when you are intent on wallowing in 20th century mud I doubt you will find professions willing to climb in with you, and spent time helping fix a page that is totally worthless in its present form.
     
    COBOLdinosaur, Nov 22, 2014 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    I recall a sig line I used for a time. It was prompted by a guy who was sure he knew all there was to know about html and css.

    "There are those who don't know what they're doing who manage to build a web site; thereby proving to themselves they do, indeed, know what they're doing."

    He used table layouts, as I recall.

    cheers,

    gary
     
    kk5st, Nov 22, 2014 IP
  13. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #13
    COBOLdinosaur, Nov 23, 2014 IP
  14. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #14
    use inline block for display property

    <div style="display:inline-block;"></div>

    you can also check for dom structure in firebug which is the firefox plugin.
     
    Naina S, Nov 27, 2014 IP