• 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
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Getting Position of Div Tag by Class

 
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have three div tags, float left. They act as filter headers for a chart. They all have same class name assigned to them.

I am using the jQuery.on function to bind a click event to each div:


I want, when clicked, the sub level div tag to appear under the calling div tag but this code places the sub level div tag in the same place on all three clicks.

I have tried this.position() but it fails.

Note: I will be cleaning this code up after I get it to responding correctly.

Is there anyone that can help on this matter? Do I need to just use id for the three div tags?

 
Sheriff
Posts: 67746
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
I'm not sure what it is you are trying to do from your description, but moving the position around in script probably isn't the right way to go. Generally, situations like this are handled with CSS and using the script to simply hide/show or add/remove class names. Moving positions around it generally overcomplicated and needless.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:I'm not sure what it is you are trying to do from your description, but moving the position around in script probably isn't the right way to go. Generally, situations like this are handled with CSS and using the script to simply hide/show or add/remove class names. Moving positions around it generally overcomplicated and needless.



How do I find the position of the element being clicked on so the app knows where to place the div tag holding the filter options?

Re-posting code because I have moved the css from inline to css file.



Would I just create three div tags populated and positioned and hidden when the page is build and then use script to show hide as necessary?
 
Bear Bibeault
Sheriff
Posts: 67746
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
You should not have to find the position of anything. As I said, you're heading down a path of hurt.

But until you can explain what you are trying to accomplish, rather than how you are trying to do it, not sure I can be of much help.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:You should not have to find the position of anything. As I said, you're heading down a path of hurt.

But until you can explain what you are trying to accomplish, rather than how you are trying to do it, not sure I can be of much help.



First, thanks for helping me do it right.

I need three menu labels, horizontal, that when clicked a container appears below the one clicked giving user options for a chart.
 
Bear Bibeault
Sheriff
Posts: 67746
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
So you want a typical horizontal menu system? Lots of examples to be had. Do some searching.

You do not need to find and adjust positions. While it's been some time since I've set one of those up (it's a rather antiquated and dated design in my opinion), it can be completely done with CSS positioning (with script to adjust visibility and class names).
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote: (it's a rather antiquated and dated design in my opinion).



So how would you design what I am needing to make it more modern?
 
Bear Bibeault
Sheriff
Posts: 67746
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
Visual and UX design is a very subjective and open area. There's no way I can make recommendations for your web app without some studying of all the requirements.

I'd say look around at modern sites and see how they are providing navigation. You may see idea you like.

Note: I did not say not to use the typical horizontal menu with dropdoiwsn -- just that I haven't done it in a while. It may be perfectly suitable for your app even if it hasn't been for mine.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Visual and UX design is a very subjective and open area. There's no way I can make recommendations for your web app without some studying of all the requirements.

I'd say look around at modern sites and see how they are providing navigation. You may see idea you like.

Note: I did not say not to use the typical horizontal menu with dropdoiwsn -- just that I haven't done it in a while. It may be perfectly suitable for your app even if it hasn't been for mine.



Thanks again. I will continue to find better ways to develope my apps. In the interium I have got the position of the class as I wanted using the this.offestLeft and this.offsetTop properties of the .myClass.on().

I know it is not the most correct way but compared to the many lines of code I had before to the less than 10 now it is a big improvement.
 
Bear Bibeault
Sheriff
Posts: 67746
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
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:



The biggest issue I have is time and of course skill. I have a countless number of people needing everything yesterday. Most of the time I can get done what is required using brute force code, not exactly the most effective way. Then as I get small windows of time I go back and try to implement improvements, most of which I get from your suggestions. However, now I have 10's of thousands of lines of code to deal with. You don't know how much I would like to start over from scratch but guess what I have had several more request just today of adds and mods so I do what I can to keep the customer happy.
 
Bear Bibeault
Sheriff
Posts: 67746
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
The point is you should not have to obtain any position values.

Give the parent container a position of relative (which makes it the offset parent) and use CSS positioning of the child within the parent.

If you start using position values, I can guarentee you will have problems, even if you can get it to appear to work initially.
 
Bear Bibeault
Sheriff
Posts: 67746
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
Perhaps Listmatic can be of help getting kick-started.
 
Steve Dyke
Ranch Hand
Posts: 2206
2
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Perhaps Listmatic can be of help getting kick-started.



Thanks, I will kook at it.
 
reply
    Bookmark Topic Watch Topic
  • New Topic