hello.another question please.
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.
thanks for all helpers.
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
not exactly. in needed to make some div to act as a button. i managed to solve it by toping on it a button component with no styles.
the main problem is this. i need that this button will trigger a pop up page that already built, and it display none as initial state.
how do i make this button to make the display as visible?
This is basically the same question I already answered for you here…
In general, to create “action” on a website (meaning when things are clicked, tapped, swiped, etc… they cause other things to happen,) you use Javascript.
Here’s a basic example of using a button and Javascript to show or hide a div.
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.
thank you again for your help.
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.
cheers.
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.
this is the link to my live website.
https://boazgportfolio.000webhostapp.com
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.
p.s
visuals in the main gallery section and in the about section are temporary and will be replaced
You seem to have multiple functions all trying to do the same thing and clashing…
Where you have:
<a class="stretched-link gallerytab gallerytab1 animated" id="galletlinks" href="#gallery-print" data-bs-toggle="#gallery-print">PRINT</a>
get rid of the href and the data-bs-toggle,
change to:
<a class="stretched-link gallerytab gallerytab1 animated" id="galletlinks" onclick="appearance2()">PRINT</a>
Your gallery will then display, but at the bottom of the page, so try adding
.photo-gallery{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
}
This should get you on the right track
thank you very much for your help. i will try it soon enough.
Thanks for taking this. Just wading through all that animation code had my eyes spinning.
This would have been incredibly easy to do with a series of five modals. You would then just place your galleries in the modal windows.
See this page where I use 10 different modals to display client’s various blog articles.
When you click on the “Read More” buttons, they open up the modal, and inside the modals I have text, images and even embedded YouTube videos.
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.
any suggestions?
updated site:
To be perfectly honest, there are so many inline styles and odd uses of the CSS position rule that I can’t quickly/easily determine what’s causing the modal to make the page scroll to the top.
What I can tell you is that I know you can have a lightbox gallery in a modal with no issues using standard Bootstrap Studio components. Here’s a very simple example to demonstrate…
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.
thank you again for all your help.
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.
as i just wrote few minutes before you posted your answer, the problem has been solved. thank you again for your help and good luck.