The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Help to fix function and layout ( toogle slide divs = contents)
Angie333
post Feb 26 2014, 10:15 PM
Post #1


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
I have tried but it doesn't look nothing like the picture, plus the only the option here is clicking on the text for next content to slide in
instead of the entire button, the structure is a mess and I really don't know what to do.

Also if it's possible to add hover on buttons to let the user know that
they are buttons to click on them and if the function is correct.




This is how it currently looks>>> http://jsfiddle.net/angie333/YTqJ9/



and this is how it should look >>>>



IPB Image


I'm quite desperate sad.gif but I don't want to insist if anyone can help me and has time, I would deeply appreciate it!

This post has been edited by Angie333: Feb 26 2014, 10:32 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 27 2014, 05:11 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Just style the links with CSS, adding a background-color, padding/margin and add the image as background-image, set to the right. Then you can add a hover state as you want.
And simply give .showScene the background-color you want. The above image uses #E8D133.

Where did you get this script from, as the link to https://tutsplus.com/lesson/the-obligatory-slider/ seems to be about a simple image slider? (Or maybe it's because I didn't watch the entire video).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 27 2014, 08:48 AM
Post #3


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Oops, I should have said: put the image inside the link tag.

Yet another example:
CODE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Untitled</title>
<style type="text/css">
a.project_link:link {
    background: #000;
    color: #fff;
    padding: 34px 7px 38px 20px;
    line-height: 80px;
    text-decoration: none;
}
a.project_link:hover {
    background: #f00;
}
.project_icon {
    text-align: right;
    vertical-align: middle;
    padding-left: 50px;
}
</style>
</head>
<body>
<a href="#" class="project_link">Project 1 <img src="bd_ntquill-80x80.gif" alt="" class="project_icon"></a>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Feb 27 2014, 10:02 AM
Post #4


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
Thank you,Thank you,Thank you,Thank you,Thank you! biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Feb 27 2014, 12:06 PM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You're welcome, again biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Feb 28 2014, 05:14 PM
Post #6


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
****Just 4 tiny things, please if you have some spare time, in IE8 the hover doesn't work the same as Mozilla & Chrome, it only highlights the text not the entire box and image, is there an extra code to add for that specific browser? Also strangely the box itself disappears once it's clicked huh.gif


**** second is there a way to squeeze the buttons together vertically, leaving an extra space at the bottom (extra cell?tried but nothing) they look too spaced out, here is an example in image (done by photoeditor,really tried to do it but the result a disaster in tables, really bad at this never used them in my life to be honest)

IPB Image


**** third,I noticed that because there is another content before this table in the page, if I press the third button the page jumps automatically on the top, how can I stop that?


**** last ,the first button text font appears bold while the other two thin, how to add bold on the other two? also change color of the text in white and in hover in grey?



this is the current fiddle, still not looking like picture and too spaced out sad.gif.

http://jsfiddle.net/angie333/pmp6t/


I swear that I've been trying and this is all I managed to do, would appreciate the help, if you have a spare moment, when you can, thank you again so much for all the help you gave me so far (sorry for repeating it but I remember every single help you gave me for all the questions and I consider it like precious gold of good will).

This post has been edited by Angie333: Feb 28 2014, 05:38 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 28 2014, 08:02 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Do you have a site? If so please create a temp directory and upload your stuff to there and link to it. JSFiddle is a PITA.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Feb 28 2014, 08:38 PM
Post #8


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
js fiddle has the html, css and function so can't it be fixed through there??? sad.gif

This post has been edited by Angie333: Feb 28 2014, 08:40 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 28 2014, 08:42 PM
Post #9


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Sure. If someone has the stamina to mess with it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Feb 28 2014, 08:44 PM
Post #10


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
JSFiddle is really for troubleshooting javascript, not layout.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Feb 28 2014, 08:45 PM
Post #11


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
yes but the layout in the page is exactly the same as the js fiddle, trust me, the issue is within the jsfiddle where I worked on and then copied all the codes into the html page, there is nothing different.

The issue are the cells (that suppose to represent the buttons with too much extra space vertically and the extra tiny issues mentioned on the question of the thread) Is obvious that I'm not doing something right because I dont have a clue on tables honestly no clue at all, just to build the table and the cells was an eternity with help from some website with examples.

it's all in jsfiddle

This post has been edited by Angie333: Feb 28 2014, 08:52 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Feb 28 2014, 08:51 PM
Post #12


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
Well as Pandy implied, it's easier to work with as a site. You can create a folder with this stuff in it as easily as a fiddle. You're asking for help, and then insisting we do it your way . . . hmmm.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Feb 28 2014, 08:54 PM
Post #13


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
It's not that, my site is currently blocked because I haven't renewed it yet... also have been working on js fiddle on some things as well and once I put the codes in the page, nothing changes, it's the same as the final result in js fiddle. I honestly trying to figure it out myself it mught be simple but not gaining any good results whatoever sad.gif

This post has been edited by Angie333: Feb 28 2014, 09:07 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 1 2014, 07:57 AM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
But the jsfiddle doesn't look like the screenshot at all. This is what I see:
Attached Image

As for the IE8 problem, you might need to use a width/height instead of the padding I used before. Maybe also set it to display: block;. I don't have any IE, so I can't check.

As for the colors of the links, just add color: #ffffff; to a.project_link:link and say color: #808080; to a.project_link:hover.

You say the first link looks bolder (which I don't see), but there is no font-weight set in the CSS, so it might just be an optical illusion.

Your third point can't be checked by us, since we only see the slider part.

I really wonder where you got that script from. In their sample, did they use a TABLE too? Can you post the URL of that?
Besides, your jsfiddle page has HTML errors, mostly caused by obsolete TABLE attributes and the same ID used more than once.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Mar 1 2014, 09:34 AM
Post #15


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
I hope with content.html (attachment) it might help to see it clearer, the cells on the left that are supposed to represent the buttons are too spaced out vertically just like the picture you showed me, the same it looks on my screen and in jsfiddle, if there is a way to put these 3 cells closer with a small gap between them as the only way of doing that I suppose is by adding a forth cell under these three that would need to take all the height space of the bottom so it fits until the end of the column table (but dont know how to do that sad.gif ) .

this is the original slide toogle where I got it from >>

https://jquerytipsntricks.wordpress.com/201...sing-jquery-ui/



Demo

http://jsfiddle.net/hcmLw/1/embedded/result/


Just looking for a simple way to have three buttons (with title and image) on the left (near to each other vertically with small gap between them) with a forth cell also (to take the vertical space at the bottom, could be used as an extra button in the future...as well) and each button once pressed leads to it's content (with sliding left transition) didnt think it would become so complicated sad.gif


Note: By pressing the mouse on the buttons and highlighting the entire table, the cells will be appear separated with a line and there the problem can be seen, tried to add the borders on the cells again after removing them in the first place but now it doesn't work sad.gif

This post has been edited by Angie333: Mar 1 2014, 10:14 AM


Attached File(s)
Attached File  content.html ( 5.02k ) Number of downloads: 150
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 2 2014, 08:57 AM
Post #16


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Tables can be become quite complicated. For that, you need a good understanding of them. But, in this case, you don't even need them.

So, I used a simpler approach by using two div's (as culumns), one for the links (.slider_nav) and one for the slider content (.slider). Now, you can add more links if you want.

Have a look.
Attached File  content_test.html ( 6.6k ) Number of downloads: 434
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Mar 2 2014, 11:27 AM
Post #17


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
Divine!!! Beautiful work!!! Exactly what I've been looking for ! smile.gif Thank you so much for this smile.gif really thank you so much for everything, hope the Universe will bless you for your patience and kindness and help with magnificent things in return smile.gif , you are a Saint!!!

This post has been edited by Angie333: Mar 2 2014, 11:29 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 2 2014, 12:08 PM
Post #18


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
Nah, I'm not a saint, just well experienced.

Will you send me the URL of the final site (private or openly, as you wish)? I'm curious to see it, after all I did to help out smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Angie333
post Mar 2 2014, 12:44 PM
Post #19


Advanced Member
****

Group: Members
Posts: 101
Joined: 16-January 14
Member No.: 20,243
Definately smile.gif will send you the link but in private, you will be the first to see it smile.gif, still have a few last things to do before it's completely done: the structure of the website and it's functions are finally done (mainly thanks to your help smile.gif which I'm deeply grateful), now just need to add the content on each page: images, info, links,etc.

This will take a few more days at least I do sure hope, let's say approximately by thursday next week hopefully it will be finally finished entirely. Also need to go through the html checker (which you suggested when I started in this forum that is a great idea smile.gif honestly never knew about it, just to make sure there are no extra wrong divs or any errors).

Coming near to the finishing, can't wait until it's finished even my uncle has been behind my back about it for quite a long time he is my promotor, due to personal financial difficulties for the past months had to deal with it and thank god you helped me.

I do hope if things do pick up, you can help me to build my father's website , you have a gift to know straightaway the function and layout I look for without a lot of explanation and it's not easy, of course you are experienced but definately think a gift is also a part of it .

Also I do think you are a Saint, you helped me in the right moment when I was in a complicated situation and honestly no one helped me in the past until the end, that takes a lot of goodwill and patience.

(will let you know the moment the site is finally up on the server with the link) thanks again smile.gif for everything!

This post has been edited by Angie333: Mar 2 2014, 12:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Mar 3 2014, 04:25 AM
Post #20


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
I must be honest by saying I sometimes lost a bit of my patience tongue.gif

Anyway, don't be too stressed to finish, as that might just cause errors.

And about your father's site, we'll see about that (or he might hire me biggrin.gif ).
Nevertheless, I advice you to start slowly without too much fanciness.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 11:23 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC