I'm creating an RGB slider using angularJS and rzslider but I have a little problem in here and need some help. I want the value box or the span.bubble in css to be fixed on the right side. Please see screenshot below:
Here's what I have now.
Plunker
I prefer css solution but if it's not possible, any solutions will do. :)
I figured It out after posting the question, I read the docs again. Here's the updated code.
Plunker
Instead of using the span.bubble css as the result output, I hid it and created
<span class="color-slider-result">{{color}}</span>
and changed the name of span.bubble to span.color-slider-result.
Related
I am still learning React and working on Next JS banner for work. I can't figure out why is this addBanner component not showing on the server and not showing any text too. What do you think I should do? Thank you!
Link to the issue on codesandbox: https://codesandbox.io/s/gifted-clarke-z5855?file=/pages/addBanner.js
I found the solution, I had forgotten to give Capital letter to the first letter of my component and give width and height to Image.:)
I am using nuka-carousel slider but can't change the default slider height to 760px. Here is the link of that carousel. I tried to add initialSlideHeight but it does not help me.
https://reactjsexample.com/a-pure-reactjs-carousel-component/
I tried to use heightMode and initialSlideHeight, but I didn't have success either. As well as, changing the carousel' imgs height.
I searched a little bit at the repo, and found some issues that may causing this problem. Like this one:
https://github.com/FormidableLabs/nuka-carousel/issues/457
Maybe you should try to find another solution. Good luck!
I want to create a navbar like here: http://www.devoncrawford.io/
I couldn't figure it out how to interact with css elements through my ts code.
Maybe you can give me a tip, where I could research a bit more.
I would also love to get this autoscrollbutoon and just be able to interact with my css stuff.
I found a lot of jQuery stuff, but I am not familiar with it. Is that working in angular and should I learn it?
Thanks for your time. Sorry, it is a little bit general question, but I hope you can give me some advice
Check the below article which explain how to create sticky navbar using angular with good explanation and example
Ref:https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3
Example:https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header
I would use an windows eventListener to look at the scroll movement.
window.addEventListener('scroll', this.scroll);
After the scroll hits a number of vertical pixels, you could change the navbar background-color from 'transparent' to the color you want. (in the examples case '#fff'. You could make two different classes with the different background-colors and append or remove the css class.
Hope this helps.
I'm trying to use the comment component from semantic-ui, but the avatar of which seems like got distorted.
The minimal working demo code is here: https://gist.github.com/cnnblike/5491ac2d4ce5d2205dbafcc5f51b8127
Do you have any idea what's actually going wrong?
This code works strangely on Chrome and IE but totally okay on fiddle here:
jsfiddle.net/9gmzvk2p/6/embed
the result behaves like this:
just compare the iframe page and the local page one bit by one bit, and find the at the beginning is the answer to the difference.
So the problem got solved, finally.
How do I set a specific section of a page (div section?) to be on top of another section? I tried adding a z-index on the CSS file but it's not working. Or maybe I'm adjusting the wrong CSS file. In the end, I am confronted with:
--- which CSS file do I adjust? (I'm using Firebug but now I'm not sure if I'm using it correctly
--- what exact code adjustments do I need to do?
This is a sample page: http://www.criminal-lawyers.com.au/offences/aggravated-assault. The testimonial box to the lower right part of the page gets covered by the brown area when you scroll down. The goal is to put it on top so it's not covered whenever you scroll down (I know I should better position it "absolute" instead, but that's not the goal).
Any feedback would be appreciated. Thanks!
Finally had it solved! Many thanks to all your comments below. Although some answers did not exactly solve the problem, there were concepts behind them that really helped.
You need to set z-index:21 on the div with id it_widget_content-11-background-wrapper which is the main container of the sidebar widget. That should solve the issue.
it's pretty simple, to this widget-background-wrapper sidebar-widget-2 add z-index:9999. sorry i would rather comment this, but reputation < 50.
Remove position:fixed on the classes
CSS file - wp-content/themes/Criminal-Lawyers-it/style.css
sidebar-widget-1
and
sidebar-widget-2
They will remain in place.
Just realised it may not be exactly how you want it to look :) However, even with correct z-index, it may look weird having them overlap the footer...