Streaming live at 10am (PST)

My First Webflow Website


#1

Hey Everyone,

Would love to get your honest feedback: http://www.miamipixel.com/

100% Made in Webflow.

BTW, if anyone can help me to get the #SwitchColor feature working, I would truly appreciate it.

Thank You All
smile


#2

What are you trying to do with the #SwitchColor ?

Also cannot see project... you didn't provide a public link.


#3

I like the simple layout and the use of Futura. Yeah not sure what you're trying to do with #switchcolor.

Also the portfolio is a huge part of the page and honestly think that we would need to see something to really judge. smile

In general I imaging the site wouldn't convert potential clients very well because there isn't much content. I'd work on that part to improve it the most.


#4

Thanks for the feedback!!!

I am releasing a new update next week with more content. I also have 3 websites under development that will show up in the portfolio section soon.

By the #switchcolor, all I wanted to accomplish is that when someone clicks there, it will reload the website, and randomly change the background color. Thats all... Any idea how to get that going? It sounds simple, but I have no clue what to do...


#5

The site is now public:

http://miamipixel.webflow.com/
https://webflow.com/design/miamipixel?preview=7a6157215290d9044ce2bb9bd4cb848b

By the #switchcolor, all I wanted to accomplish is that when someone clicks there, it will re-load the website, and randomly change the background color of the main section. Thats all... Any idea how to get that going? It sounds simple, but I have no clue what to do...


#6

As far a reloading the site... just link the site back to the index page.

When the user clicks on the link... the site will reload.

The background color switching thing can be done with jquery.


#7

Yes, i fixed the link, now its pointing to the right url.

Is jquery the same as something like this: http://chancejs.com/ ?

to be honest, i have no clue how to implement this, so any help is greatly appreciated...


#8

Not trying to be rude...

You are creating a web design company
- and you don't know what jquery is ?

http://jquery.com/


#9

Its ok, i get your point, and I partially agree!. I just love the design aspect of web design, not the programming. I will have someone soon to take care of that part once I find the right match.

As for now, I only depend on webflow to design. I obviously have a lot to learn smiley

will check both links that you sent me. Thanks!


#10

So I got to this: http://jsfiddle.net/TQ3hV/1/

and I all wanted is to find out the detailed steps to get that working in webflow for my site...


#11

By no means is jquery a requirement for creating websites.

Many of us... on Webflow and elsewhere - started with simple HTML long before jquery was even thought of.

I hope you can find someone reliable - and experienced enough - to develop solid code for you.

In most cases I've encountered, jquery is not required at all. Especially if you use Webflow and concentrate on simple / easy to use websites.

There are some good jquery developers here on Webflow.

Give a shout-out and I'm sure someone will bellow back.


#12

In your project... Custom Code section - add this code to your footer section:

<script type="text/javascript">
$( document ).ready(function() {
    $('.specbutton').click(function() {
         var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' 
                            + Math.floor(Math.random() * 255) + ','                            
                            + Math.floor(Math.random() * 255) + ')';
        $('body').css('background-color', color );
    });
});
</script>

See video: http://quick.as/4ZyqT9Q1

In the Designer... add a Text Link... basically anywhere.

Give the link a class name of "specbutton" without the quotes... and lowercase.

See video: http://quick.as/O4zoC6Q1

Export the code (it will not run the Designer... it will only work in run-time / live mode).

If your plan does not allow exporting... you will need to Publish your site instead.

If exporting - FTP the code to a your webserver.

Open the page in your browser... ie: http://mydomain.com/index.html

Click the link several times.

See video: http://quick.as/RYwghvVP

Note: The code will only affect the body of your website.

If you have any sections or div that have a background color (ie: non-transparent)
- the color will not show through them.

It will only affect the background property of the body element.


#13

First of all, thanks so much for what you did. Explanation and videos... you are amazing!

I did all the steps and is not working, but my guess is that it's probably its a small tweak away...

Right now, even after implementing those steps, is not changing any colors. But let me clarify, that all I need is to change the background color of the HERO section only, which is the first screen then see once landing in the site.

I have a class 'hero' to that section.

makes sense?

Thanks again... If it is too much, please disregard blush


#14

your hero section... is actually called "hero" - lowercased.

change this:

$('body').css('background-color', color );

to this:

$('.hero').css('background-color', color );

Make sure you use proper case... and note the dot before "hero".

Also for the link you dropped onto the page

Create the class name as "specbutton" - no quotes... notice no dot.

The Designer assumes the dot... will insert the dot into the code for you.

In the custom code section... note the dot

$('.specbutton').click(function() {

.specbutton is not the same as Specbutton or .SpecButton

The dot is important... as much so as case.


#15

Got it! makes sense...

looks like it's working now, yeahhh!

But when you click the button, it changes the color really quick, and reloads the site with the same blue background at the same time. how do we make it, so it sticks to the new color randomly picked?


#16

Do you have an href on the link.

Ie: are you reloading the index page.

If so, the browser will always return to the original / default

So... Remove the href. There's no need to reload the page for this.


#17

7:16pm in Miami and I cant express how happy I am to see this working... @Revolution Thank You So Much!!! I owe you one!!! You went beyond what this forum supports here... I appreciate that... We'll be in touch.


#18