Jump to content

harry_ord

Members
 View Profile  See their activity

  • Posts

    117

  • Joined

  • Last visited

 Content Type 

Posts posted by harry_ord

    Full width rows in Bootstrap

    in CSS

    Posted

    Hello.

    This is my page:

    http://feriapixel.cl/anchour/

     

    I'm using Bootstrap's grid system and whenever i use divs with the row class they get stuck in a container, and i want them to use be full width.

    This is one of my divs for example:

    <div class="content-seis" >
    <div class="row" >
    <div class="col-sm-6 showroom coffee-break" >
    <h2>Un coffee break con sabor y atención casera, para tu trabajo</h2>
    <p>Café americano, tapaditos, fruta, jugos, opciones vegetarianas y más.
    Tenemos promociones ya armadas, pero tomamos tu pedido con gusto.</p>
    <a href="#" class="btn btn-showroom" role="button">NECESITO COFFEE BREAK</a>
    </div>
    <div class="col-sm-6 showroom pasteleria-diseno">
    <h2>Pastelería con diseño</h2>
    <p>Tortas con diseño, popcakes, cupcakes, alfajores y más.
    Te damos el diseño que necesites.</p>
    <a href="#" class="btn btn-showroom" role="button">QUIERO TORTAS CON DISEÑO Y MÁS</a>
    </div>
    </div>
    </div>


    I want that div to be full width. Sorry for the really basic question, but i can't manage to do it, i tried putting all inside a div withe the container-fluid class but it didn't work.

    How can i do these 2 effects?

    in JavaScript

    Posted · Edited by harry_ord

    I did this:

    <script>
    $(window).scroll(function() {
    var height = $(window).scrollTop();
    if (height > 150) {
    $(".content-dos").animate({top : "0%"});
    }
    if (height < 90) {
    $(".content-dos").animate({top : "70%"});
    }
    });
    </script>

    What i'm doing is, based on the window scroll position, i make the second section "go up". It has a position relative with a 70% top intially, so i give it a position top:0 when the scroll is more than 150px down.

    I'm having a little problem now, and is that whenever i move the scroll up again, it takes some time for the second section to go back to its initial position, like a few seconds. How can i make it go faster?

    This is where i'm doing it:

    http://feriapixel.cl/anchour/

    How can i do these 2 effects?

    in JavaScript

    Posted

    Hello

     

    I want to do something like this Wordpress theme:

    http://themenectar.com/demo/salient-frostwave/

    In the second section, just after the big header, we have a white background and some blue icons, right? This section has 2 effects in need to learn how to do them:

    1- When you scroll-down to the second section with your browser, it looks like the second section "eats" the first. It not only scrolls down, it looks like the second section gets above the first.

     

    2- The first time your browser loads the second section, every icon appear slowly on the screen.

    How can i do those 2 pretty stuff?

    Image gallery with hover effects

    in CSS

    Posted

    Oh, yeah, opacity, that would do!

    Look there is text appearing:

    -In the div with the word "logofolio" written in it you can see the word "design" at the bottom when you hover over it.
    -When you hover over the "broken egg" one you can see the words "design", "web" and "video" appearing at the bottom-left corner.

    -The same with Davinci.

    Image gallery with hover effects

    in CSS

    Posted

    Hello

     

    I want to learn to do more stuff like in this Wordpress theme:

    https://www.anchour.com/

    After the video and the heading with white background there's a section with pictures, whenever you hover over a picture they get dark and some text appear on them. How can i do this? i know i can do something with the :hover pseudo-class and put some style there to get the picture darker, but... how can i make text that wasn't there in the first place appear?

    Video background on webpage

    in CSS

    Posted

    Hello

     

    I want to have a video background on my page, just like this Wordpress theme has:

    https://www.anchour.com/

    I was googleing and i found this, and also deployed it on another website i did some tiem ago:

    https://codepen.io/dudleystorey/pen/knqyK


    The problem i have with the example above is that it has to many styles and stuff already created and they destroy the flow of my website. I need to somehow learn to do it from scratch or find another simpler solution so i have a better control of it and also try to make it responsive.

    So, do you know any tutorial or a jquery plugin or something?

    Fixed background picture in the whole body getting behind other transparent divs

    in CSS

    Posted

    Hello

     

    I want to replicate the background of this Wordpress theme:

    http://themes.muffingroup.com/be/firm/

    It has always the same picture in the same position and it gets behind other divs with transparency, like the yellow div an the others. How can i acomplish that in my page?

    http://feriapixel.cl/befirm/

    I wish my paralax div was on the whole page, just like the picture of that Wordpress theme i showed above. How?

    Carousel doesn't show correctly

    in JavaScript

    Posted

    Ok, i found the solution.

    I just needed to create more carousels and put them side by side, like this:

    <div class="row carrusel" >
    <div style="width: 100%; text-align: left;">
    <div class="col-xs-4 carousel slide" id="myCarousel">
    <div class="carousel-inner" style="text-align: center;">
    <div class="item active">
    <h4 >Metro<br> Valparaíso</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>

    Then this:

    <div class="col-xs-4 carousel slide" id="myCarousel2">
    <div class="carousel-inner" style="text-align: center;">
    <div class="item active">
    <h4 >Estación Baquedano Metro de Santiago</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>

    And add 1 script for every single carousel without the clone function like this:

    <script>
    $('#myCarousel2').carousel({
    interval: 4000
    });
    var itemCount = 0;
    var elementlength = $('.carousel .item').length;
    itemArray = [];
    //var ItemWidthCalc = 100 / elementlength;
    //$('.carousel .item > div').each(function() {
    // $(this).css({'width': ItemWidthCalc + "%"});
    //});
    $('.carousel .item').each(function() {
    itemArray.push();
    });
    $('.carousel .item').each(function() {
    itemCount = $(this).index();
    for (i = 0; i < elementlength - 1; i++)
    {
    itemCount++;
    if (itemCount > elementlength - 1)
    {
    itemCount = 0;
    $(this).append(itemArray[itemCount]);
    }
    else
    {
    $(this).append(itemArray[itemCount]);
    }
    }
    });
    </script>

    Carousel doesn't show correctly

    in JavaScript

    Posted

    Ok, that fixes it again:

    <div class="carousel slide" id="myCarousel">
    <div class="row">
    <div class="carousel-inner" style="text-align: center;">
    <div class="item active">
    <div class="col-xs-1 columna-item" ><h4 >Metro<br> Valparaíso</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Qstudio</h4>
    <p>Diseño en Base a Cobre</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Kawell</h4>
    <p>Innovación en el Cuidado Equipo</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Estación Baquedano Metro de Santiago</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>EcoSea Farming</h4>
    <p>Innovación en acuicultura</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Clinica Mayo</h4>
    <p>Investigación sobre implantes ortopédicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Hospital del Cobre, Calama</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Hospital FUSAT</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-1 columna-item"><h4>Hospital Roberto del Río, Stgo</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>


    But it still looks terrible. How can i make it to display 3 elements in a row, then other 3 different elements in the same row, then other more and go on like that?

    Carousel doesn't show correctly

    in JavaScript

    Posted

    Please, please, please! I need help with this again.

    I tried to put new elements in the carousel and they appear on a next row instead of appearing in the same one.

    I tried doint this, but it didn't work as expected and look terrible:

    <div class="item active">
    <div class="col-xs-2 columna-item" ><h4 >Metro<br> Valparaíso</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4 >Hospital de Urgencia <br>Asistencia Pública</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Qstudio</h4>
    <p>Diseño en Base a Cobre</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Kawell</h4>
    <p>Innovación en el Cuidado Equipo</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Estación Baquedano Metro de Santiago</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>EcoSea Farming</h4>
    <p>Innovación en acuicultura</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Centro de Concentración Juan Pinto Durán</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Clinica Mayo</h4>
    <p>Investigación sobre implantes ortopédicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Hospital del Cobre, Calama</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Hospital FUSAT</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>
    <div class="item">
    <div class="col-xs-2 columna-item"><h4>Hospital Roberto del Río, Stgo</h4>
    <p>Intervenciones en espacios públicos</p>
    </div>
    </div>

     

×
×
  • Create New...