Forum Replies Created
-
AuthorPosts
-
Hi Guys,
It seems like no one wants to help me with this so I tried to resolve the problem on my own.
I used “grid row” element which helped me to simulate desired toggle behavior (bottom section of my frontside).
Here is CSS I used with help of “Code Block” element:<style type = “text/css”>
.av-layout-grid-container .av_one_half:hover {
width: 180% !important;
transition: .3s;
}.av-layout-grid-container .av_one_half {
width: 100%;
transition: .3s;
}
<style>Unfortunately, grid row element doesn’t have “movie background” and “parallax” option.
Question: Is there any way to reach the same behavior with help of ” two toggles nested within two “columns” and “color section” element ?
I would greatly appreciate it if you kindly give me some feedback.
Best Regards, MarcinHi Nikko,
I locked the toggle several “title fields” with this css:
p[data-fake-id=’#toggle-id-1′] {
background-color: rgba(242,255,0,0.3)!important;
pointer-events: none;
}p[data-fake-id=’#toggle-id-9′] {
mix-blend-mode: screen!important;
background-color: rgba(0,115,255,0.3)!important;
pointer-events: none;
}p[data-fake-id=’#toggle-id-13′] {
background-color: rgba(0,115,255,0.3)!important;
pointer-events: none;}
Is there any better solution for this? How can I get page-id? What is nth-child.
Sorry, I have very minor programming skills.Best Regards, Marcin
-
This reply was modified 8 years ago by
ioiobit.
Dear Nikko,
Sorry for my late reply!
I think i’m really happy with the present state of the accordion toggles. I have one more question. I need CSS for making several toggles just inactive (locked like).I would like to use them as “info” sections. My problem is, I want to use two accordions on the same page. How can I change properties of one toggle “title” section in the first or second accordion.Example scheme: first title field of the first accordion is blue and locked.
Best Regards, Marcin
Hi Nikko,
The overlay “jumping issue is pretty subtile. As I sad it is about 2 or maybe 3px jump from left to right.
I was just curious about the reason of this behavior. You could just zoom overlayed picture in your browser and hover your mouse over the picture few times. I couldn’t manage making screenshots while hovering.Your code worked. Anyway, without easing and proper transition the movement is a bit chaotic.
Anyway thanks lot for your Code proposition.Best Regards, marcin
-
This reply was modified 8 years ago by
ioiobit.
Hi Nikko,
1. I mean showing content through “hover” action (Like in the case of accordion slider).
2. Shit:) I’m really missing this function!:)
By the way, there is still some minor problem with “linked” overlay of the content.
The overlay is jumping about 2px from left to right while hovering.Best Regards, Marcin
Wow! Finally it works! I really appreciate your help!
I would like to ask you two more questions, if you doesn’t mind.1. Is it posible to expose Toggle content just through “mouse hover” action?
2. Is it possible to change the position of toggle from horizontal to vertical ?Many, many thanks, Marcin
Hi Nikko,
Ok! The Site should work now.
Regards, MarcinHello?
Dear Nikko,
I already tried this one.
Background disappeared, but the linked picture is still moving up and down on mouse hover.
Do you have any idea, how to get rid of this “jumpy”content behavior?Best regards, Marcin
-
This reply was modified 8 years, 1 month ago by
ioiobit.
Hello? Anyone there?
Hello?:) I would appriciate some advice:)
-
This reply was modified 8 years, 1 month ago by
ioiobit.
Hi Nikko,
No, I’m referring to the last “linked” section of the toggle. It is called “l 2010 l roller l”.
If you try to hover over the picture, the blue balk will appear on the upper side of this “linked” section.
Best Regards, MarcinHi Nikko!
Thank you for you fast help!
It worked, but in the case where “toggle content” is linked the top-line still exist.
Best Regards, MarcinHi Rikard,
Thank you for your fast response!
Yes, I want to remove the space between image and the title bar.
The margins are now a little bit shorter but unfortunately they didn’t disappear.Regards, Ioio
Hi Rikard,
I appreciate your fast answer!
I already solved animation problem of my toggle, but I have another one:) Padding of the toggle content picture doesn’t changed after implementing CSS code. There is still black field on the top and bottom of my content test pictures.
The “Maximum Container width” doesn’t take any influence on my layout when using Enfold backend (only CSS works).
Since I’m not a programmer, it is possible I made some coding mistakes:)
I’m still looking for solution of 2nd and 3rd question. Thank you of Your help!
Best Regards, IoioMy quick css:
#top.boxed, .html_boxed.html_header_sticky #header, .container {
max-width: 1210px;
width: 100%;
}.active_tc.toggle_wrap {
display: none;
}.toggle_content {
padding: 0!important;
margin-bottom: 20px;
border: none;
}.js_active .toggler {
font-size: 15px;
font-weight: bold;
padding-left: 50px;
}.av_toggle_section .toggler {
background: rgba(1,1,1,0.4) !important;
transition: all .2s linear !important;
border-radius: 0px !important;
border: 2px solid;
border-right: none;
border-left: none;
border-bottom: none;
}.av_toggle_section .toggler:hover {
background-color: #000000!important;
border-radius: 0px!important;
border-color: #f2ff00!important;
}.toggle_icon {
background: none!important;
border-style: solid;
border-width: 2px;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
border-radius: 10px;
}.toggle_icon .vert_icon {
border-left-width: 2px;
height: 12px;
top: 2px!important;
left: 7px!important;
}.toggle_icon .hor_icon {
width: 12px;
border-top-width: 2px;
left: 2px!important;
top: 7px!important;
}.toggle_icon, .toggle_icon .vert_icon, .toggle_icon .hor_icon {
border-color: #c94e8e!important;
} -
This reply was modified 8 years ago by
-
AuthorPosts