Calling help from fellow web designers/coders

SpasianNrD

New member
xx

Im simply using data-filter="" to achieve the content filter.

i.e. the button i click if i want to filter only content that would be photography related
Code:
<li><a href=""?data-filter=".photography">Photography</a></li>

So what I am trying to achieve for example is clicking the first link on the front page and it going to the collection page with photography related content already filtered.

Any suggestions? And please try to understand my situation before responding, thank you :).
 

GigaGreg

Moderator
Staff member
So you have one page website and you want to make links from menu go to different section?

Code:

<li><a href="#photography">Photography</a></li>

<div class="container" id="photography">
content
</div>

I think that is what you would want to achieve, If I'm wrong, I'll try to help you again.
 

dtx0

New member
I recommend against adding extra code to the boilerplate template when everything is already there and only needs to be slightly modified. You should be looking at "/BOX/css/style.css" and "/BOX/portfolio/index.html." On a side-note, when you link to images, make sure they're https (I know they currently aren't because the template hasn't been modified much). See below for a reference to changes that should be made to "/BOX/portfolio/index.html
Code:
? ? <!-- main container -->
? ? <div class="main-container portfolio-inner clearfix">
? ? ? ? <!-- portfolio div -->
? ? ? ? <div class="portfolio-div">
? ? ? ? ? ? <div class="portfolio">
? ? ? ? ? ? ? ? <!-- portfolio_filter -->
? ? ? ? ? ? ? ? <div class="categories-grid wow fadeInLeft">
? ? ? ? ? ? ? ? ? ? <nav class="categories text-center">
? ? ? ? ? ? ? ? ? ? ? ? <ul class="portfolio_filter">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] class="active" data-filter="*">All</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".photography">Photography</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".logo">Logo</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".graphics">Graphics</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".ads">Advertising</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".fashion">Fashion</a></li>
? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? </nav>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- portfolio_filter -->

? ? ? ? ? ? ? ? <!-- portfolio_container -->
? ? ? ? ? ? ? ? <div class="no-padding portfolio_container clearfix">
? ? ? ? ? ? ? ? ? ? <!-- single work -->
? ? ? ? ? ? ? ? ? ? <div class="col-md-4 col-sm-6 ?fashion logo">
? ? ? ? ? ? ? ? ? ? ? ? <a href="single-project.html" class="portfolio_item">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://placehold.it/1000x1000" alt="image" class="img-responsive" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio_item_hover">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio-border clearfix">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="item_info">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>Mockups in seconds</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <em>Fashion / Logo</em>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- end single work -->
 

SpasianNrD

New member
dtx0 said:
I recommend against adding extra code to the boilerplate template when everything is already there and only needs to be slightly modified. You should be looking at "/BOX/css/style.css" and "/BOX/portfolio/index.html." On a side-note, when you link to images, make sure they're https (I know they currently aren't because the template hasn't been modified much). See below for a reference to changes that should be made to "/BOX/portfolio/index.html
Code:
? ? <!-- main container -->
? ? <div class="main-container portfolio-inner clearfix">
? ? ? ? <!-- portfolio div -->
? ? ? ? <div class="portfolio-div">
? ? ? ? ? ? <div class="portfolio">
? ? ? ? ? ? ? ? <!-- portfolio_filter -->
? ? ? ? ? ? ? ? <div class="categories-grid wow fadeInLeft">
? ? ? ? ? ? ? ? ? ? <nav class="categories text-center">
? ? ? ? ? ? ? ? ? ? ? ? <ul class="portfolio_filter">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] class="active" data-filter="*">All</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".photography">Photography</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".logo">Logo</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".graphics">Graphics</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".ads">Advertising</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".fashion">Fashion</a></li>
? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? </nav>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- portfolio_filter -->

? ? ? ? ? ? ? ? <!-- portfolio_container -->
? ? ? ? ? ? ? ? <div class="no-padding portfolio_container clearfix">
? ? ? ? ? ? ? ? ? ? <!-- single work -->
? ? ? ? ? ? ? ? ? ? <div class="col-md-4 col-sm-6 ?fashion logo">
? ? ? ? ? ? ? ? ? ? ? ? <a href="single-project.html" class="portfolio_item">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://placehold.it/1000x1000" alt="image" class="img-responsive" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio_item_hover">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio-border clearfix">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="item_info">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>Mockups in seconds</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <em>Fashion / Logo</em>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- end single work -->
So please, next time please read my post thourghly.
 

SpasianNrD

New member
GigaGreg said:
So you have one page website and you want to make links from menu go to different section?

Code:

<li><a href="#photography">Photography</a></li>

<div class="container" id="photography">
content
</div>

I think that is what you would want to achieve, If I'm wrong, I'll try to help you again.
Stijn said:
Yea that might put me in the right direction, I have to code the js, becuase atm the extra tag to the url doesn't work. Thanks.
 

dtx0

New member
SpasianNrD said:
dtx0 said:
I recommend against adding extra code to the boilerplate template when everything is already there and only needs to be slightly modified. You should be looking at "/BOX/css/style.css" and "/BOX/portfolio/index.html." On a side-note, when you link to images, make sure they're https (I know they currently aren't because the template hasn't been modified much). See below for a reference to changes that should be made to "/BOX/portfolio/index.html
Code:
? ? <!-- main container -->
? ? <div class="main-container portfolio-inner clearfix">
? ? ? ? <!-- portfolio div -->
? ? ? ? <div class="portfolio-div">
? ? ? ? ? ? <div class="portfolio">
? ? ? ? ? ? ? ? <!-- portfolio_filter -->
? ? ? ? ? ? ? ? <div class="categories-grid wow fadeInLeft">
? ? ? ? ? ? ? ? ? ? <nav class="categories text-center">
? ? ? ? ? ? ? ? ? ? ? ? <ul class="portfolio_filter">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] class="active" data-filter="*">All</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".photography">Photography</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".logo">Logo</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".graphics">Graphics</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".ads">Advertising</a></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <li><a [color=#FF0000][u][i][b]href=""[/b][/i][/u][/color] data-filter=".fashion">Fashion</a></li>
? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? </nav>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- portfolio_filter -->

? ? ? ? ? ? ? ? <!-- portfolio_container -->
? ? ? ? ? ? ? ? <div class="no-padding portfolio_container clearfix">
? ? ? ? ? ? ? ? ? ? <!-- single work -->
? ? ? ? ? ? ? ? ? ? <div class="col-md-4 col-sm-6 ?fashion logo">
? ? ? ? ? ? ? ? ? ? ? ? <a href="single-project.html" class="portfolio_item">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img src="http://placehold.it/1000x1000" alt="image" class="img-responsive" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio_item_hover">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="portfolio-border clearfix">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="item_info">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>Mockups in seconds</span>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <em>Fashion / Logo</em>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? <!-- end single work -->
So please, next time please read my post thourghly.

No, the text in red does not mean delete, it means look there. This, however, is strike-through text -- it does mean delete. Again, I recommend you stick with the template and try not to fiddle around with more than is necessary, as even front-end professionals end up regretting it later on account of debugging.

P.S.: This is not a negative critique, so try not to construe it as such.
 
As it was suggested, just use what is already there. Who in the right mind would use filters? Why the extra bloat code. Simple code with divs and css. Click the link and you are there. Its basic HTML/PHP.
 

SpasianNrD

New member
Lol well I see some people dont like to introduce experimentation. I was having fun trying to figure it out but nevermind. Thanks for the people who tried to help though.
 
There is nothing to figure out. A filter is used to do just that, filter. You want a link that goes to gallery. You can use a filter to filter random pictures on display. Filter random content. But using it for what you want is a diaster in the making in my opinion.