i’m trying to implement an Onclick button on a column div, so it can point to another section or div on a page. i know i should use the key property on the attribute tab. but i’m not managing to succeed.
Do you mean click a button and it links to an anchor somewhere on the page so the page scrolls to that section?
If it’s on the same page give the section/div you want to link to an ID (Name it what you want). For the button the hyperlink will be the ID you gave the section/div starting with hash symbol. For example #myanchor
If you want it to link to an anchor on another page it’s the same as above except the link will be the page name and the anchor name like this otherpage.html#myanchor
This is basically the same question I already answered for you here…
That said, there’s really no need to create things from scratch when you can just use existing Bootstrap components to do what you want. Bootstrap Studio already has three different pre-made components that can be shown or hidden with a button click - the Modal, the Toast and the Offcanvas. You can style any of these components with CSS to look like the div you created, and then show or hide them with a button or link using the Target options in the Options panel.
Another less conventional method to show or hide something is by using the Checkbox. You can style the checkbox in such a way so that you don’t actually see the checkbox or check, but you’ll need some CSS skills for this. It just becomes a clickable object.
i took your advices and used the modal component and the toast. they were both very difficult to work with. as for example, the modal has changed the location on the page once it get rid off and i couldn’t make the toast element to appear on the same section i was in. i’m sure that some of this problems that i ancountered are lack of sufficiant knowledge, but i decided to solve it by js code. i’m sure i’ll have other question further ahead but i’m on the finishing line with my site and it looks good so far.
Without seeing your site, or exactly what it is you’re trying to accomplish, it’s difficult to advise you on how to adapt/modify a modal, toast or Offcanvas to fit your needs. The positioning of these items is done by certain default Bootstrap classes, not all of which are adjustable through the visual tools (at least not easily) but if you post a link to your live website, I could probably advise you on what you need to do.
notice that there are 5 gallery blocks (display: none). i need to connect the button on the main gallery to the aproperiate block. print to print retouch to retouch and so on. i now have only three button links (with name on them) to connect on my main gallery.
i need the page to pop up on screen and be visible. and to remain on same position underlying (gallery section). i hope i"m understood.
thank you very much.
visuals in the main gallery section and in the about section are temporary and will be replaced
so i have tried to use this modal. it all worked pretty good, but i have this problem that when it closed, it keep getting me back to the begining of the page, and its not leaving me at the point were i was before (gallery section). also, there is some kind of lagging or jump in the fading out of the modal. maby it is because of that changed position, but i dont know. any help will be wellcomed.
i think everything is solved with that modal except for that thing with the location. the close button of the modal keep getting me back to top site and i need it to stay where it first opened - in the gallery section.
i know that my use of css is not perfect, to say the least. but at the end, the site is functioning and i’m happy with the result. it is my first time building in bootstrap and in real code sort of speak.
the lightbox function do work and there were no issues with that. only that when gallery page is closed, it getting me to the top of the site. my guess is that there is some conflicts with the js code, so i’ll look into that.
thank you for you help. i’ll try, later on, to clean and correct that css, but for now it will do.
speak of messy css code. is there any site or program that can check css on that level?
i managed to solve this.
it turns out that the body (and html too) had a width and a height. and the gallery section was in 100% values on both, so i guess it had no real height and width, so it get back to top. i fixed this and all its working now.
The example site I put up should give you a good idea of how you can use the Link, Image, Modal, and Lightbox components to create your photo galleries without having to write a ton of CSS, or any custom JS.
Please don’t take this the wrong way. I understand you’re just getting started, but there’s no website I’m aware of that can clean up poorly written CSS. BSS has a feature to search for unused or duplicate classes, but it won’t catch things like rule redundancies, non-existent classes/IDs assigned to components, or mistakes that simply have to be fixed manually.
Three things I would strongly recommend: 1) refrain from using inline CSS, 2) remove all the animation effects until you’ve got the website working properly, 3) don’t minify your code until you’ve got the website working properly. These things will make it a LOT easier for someone to look through the CSS to identify the issue you’re having.
The Bootstrap Studio Help category is mainly for help with using the software. This issue you’re experiencing is almost certainly related to your custom code. I’d recommend you post this in the Webdesign Help Category. Perhaps one of the developers there will be willing to go through your code and figure out what’s causing the scrolling issue.