• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • paul wheaton
  • Jeanne Boyarsky
  • Ron McLeod
Sheriffs:
  • Paul Clapham
  • Liutauras Vilda
  • Devaka Cooray
Saloon Keepers:
  • Tim Holloway
  • Roland Mueller
Bartenders:

float a picture link advert

 
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Having a nightmare with this, although it's my own fault having copied script from all over the place and tried to patch it together...

Trying to float a picture link advert (banner) over the top of biographical content in

form, until the visitor clicks a simple cross to close it and get on with their reading! (I don't have any particular interest in removing the cookie, but the site I nabbed this piece of the code from seemd to think it should be an option)

Here's the now-totally-scrambled code...





I did have the banner top left of the main content page (under the title), hovering over the paragraphs - correct...ish
But the X to close was flying through the air to the right of the screen, unattached to the banner.
And the banner did not close when the cross was clicked.
And now I've changed something and the banner is floating at the bottom of the page underneath the paragraphs, with the X still top right (and still not working).
I have no idea what to do to fix it (as I'm sure you can tell!)
Ideally, I just want it to be centred on the page above the paragraphs beneath it, with an X on the corner and of course for it to close when requested.

All assistance gratefully received as it's driving me crazy!
Thank you

 
Sheriff
Posts: 67753
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Carla Fry wrote:Ideally, I just want it to be centred on the page above the paragraphs beneath it, with an X on the corner and of course for it to close when requested.


If that's all you need then why all the animation and other code?
 
Carla Fry
Greenhorn
Posts: 3
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Because it's the only code I could find on a search that seemed to do what I wanted. But I don't need animation or anything. I just want the pic to be what you see first when you enter the page, centred within the container (and hyperlinked to another url), and then when you close the picture with the x, it reveals what is already there underneath ie paragrpahs with text and images.

I will eventually get round to do a fancy new site on wix or something, but for now this just has to limp through the next couple of months.

Any ideas, I really need help with this as you can tell!

 
Bear Bibeault
Sheriff
Posts: 67753
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Advice:
  • Delete everything and start from scratch.
  • Build it all a bit at a time, not moving to the next step until the previous is working
  • Start by simply getting the HTML and CSS correct so that the structure is correct and the "box" appears as you wish it to.
  • Once that is done, then, and only then, should we move onto discussing adding behavior.


  • More advice:
  • Never just copy code from the Internet. Learn from it, yes. Copy it vebatimm, no. It'll never do what you want. Write your own code one line at a time until it does what youwant.


  • Post back with your HTML code once the box appears correctly, or if you have trouble getting that far.
     
    Bear Bibeault
    Sheriff
    Posts: 67753
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    More advice:
  • Alweays, always, always, properly indent your code. It is a non-optional tool that not only makes the code more readable, but makes it apparent what the structure is, and if there are problems with that structure.
  •  
    Carla Fry
    Greenhorn
    Posts: 3
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Thank you very much Bear for your very sensible and logical advice.

    I didn't copy all the code from the internet - just the JS bit and the .banner and .close, hmm and I kind of bastardised the .biog bit

    But in any case, I will go back to the drawing board as you suggest, although I don't know how to indent - but I'll find out.

    It will probably take me a few days though as I have 4 kids and am also a ghost writer myself nearing completion of a book...

    Thanks again Bear, much appreciated
     
    Bear Bibeault
    Sheriff
    Posts: 67753
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    My pleasure. Starting from scratch will allow to think it all through, rather than trying to figure out what some code -- that's not even doing what you need it to -- is doing.

    Even seasoned veterans find the one-step-at-a-time approach a big help in getting things done.
     
    I think he's gonna try to grab my monkey. Do we have a monkey outfit for this tiny ad?
    We need your help - Coderanch server fundraiser
    https://coderanch.com/wiki/782867/Coderanch-server-fundraiser
    reply
      Bookmark Topic Watch Topic
    • New Topic