Filtered list with parent items - selected by cursor arrows. AngularJs

In my form i have input with dropdown, in dropdown I show json data like:

{
    "title": "Parent #1",
    "child" : [
        {"title":  "Child ##1"},
        {"title":  "Child ##2"},
        {"title":  "Child ##3"},
        {"title":  "Child ##4"}
    ]
}

I bind it to such html:

<div class='dropDownContainer'>
    <div class='filteredItemContainer'>
        <ul>
            <h5>Parent title</h5>
            <ul>
                <li>Child items</li>
                <li>Child items</li>
            </ul>
        </ul
    </div>
</div>

User can select any item - parent or child. I need to add possibility select item by cursor. How i can implement such functionality? I know how to do with simple ul list, but i don't know how to do it with such structure.

via Chebli Mohamed

Optimise Load-Time and Mobile/Browser-Compatibility

I am not designer and I am not coder! But I had a vision. How I wanted my site - so I worked really hard and long to get like it is now! (it only works on desktop computers - I need to detect mobile phone and shut down some effects ... this is the next step).

I know I have used some very dirty html to build these site - as soon we have the money I will pay someone to code it correctly with ajax or something:

http://ift.tt/1JJQSaN

But my question to you if you maybe have a little bite time: Do you have tips for me how I could optimize this site?

• My biggest Problem is the Background-Video ... is there some way to load all other elements first and then the video?

• Second problem: its all 1 html-file and the site is about 2mb big - is there a way first to load images when they are really needed?

• You see some other Problems? I had with 1 computer some problems with the font (it was to big - dont know why - but in all other computers, it worked)

....

Edit: i found someone with the same Font- / Text- Bug!

http://ift.tt/1P3Le3u

Someone has an Idea how to fix that? Is it maybe becouse i use Line-Height?

via Chebli Mohamed

How to get a hover effect for glyphicon icons?

I'm trying to make glyphicon icon appear every time I hover my mouse over it. And I'm using <span> tag for it. But this refuses to work. What have I done wrong?

application.scss

 /*
 *= require bootstrap3-editable/bootstrap-editable
 *= require bootstrap-datepicker3
 *= require_tree .
 */

  @import "bootstrap-sprockets";
  @import "bootstrap";

.hovering:before {
display: none;
}

.hovering:hover:before {
display: block;
}

In my view file it looks like this:

  <span class='hovering'>
    <%= link_to user_task_path(current_user, task.id), method: :delete,
    data: { confirm: 'Are you sure?' }, remote: true do %>
      <i class="glyphicon glyphicon-trash"></i>
    <% end %>
  </span>

via Chebli Mohamed

Is it possible to implement a Mega Drop Down Menu using pure CSS?

I would like to implement a Mega Drop Down Menu for my Navigation Menu using pure CSS i.e. NO Javascript/JQuery. When the user hovers on a navigation item, I'd like to display a mega drown menu which stays active if the user is within the bounds of the menu. If the user moves away or hovers over a different menu, it should then display the relevant menu.

The below image depicts exactly what I'm looking for. GAMES AND TOYS is the first nav-item which on hover should display the mega drop down menu (the overlay with a #ff1300 border). The yellow boxes represent the different nested divs that I'd like to show within a container div.

**Note: I've already tried putting the nav-item and a drop-down within a single div and using

.nav-item:hover .dropdownpanel {
    display: block 
/*    This is set to display: none to be hidden and then shown on hover */
}

Is there a way to achieve what I'm looking for?

via Chebli Mohamed

detection whether is an e-shop written in Magento

I'm trying to create a script which would do a simple thing. The input is a list of URLs and output is a list of those eshops which are written in Magento.

I've read that there is no way to realize whether is the eshop in Magento or something else but I've also read that there is a lot of signs that could tell you that this web page is using Magento almost 100% sure.

So I've found this page: magento detector which can tell you whether is it a Magento or not so I'm trying to use their information.

They say for example this:

Magento has its user interface files in a directory called /skin/. For the frontend (not the admin ui) the files are located in /skin/frontend. So if this directory exists in the page source then it is very likely that the store runs on Magento.

For example for this eshop: starkk told the detector that it is a magento and the one of condition it meets is the condition I've mentioned above.

How could I check whether the directory exists? I took a look on: http://ift.tt/1SHgVVO using browser but the page raises error.

And additional question: Do you know another and better way how to detect Magento?

via Chebli Mohamed

How to run the CSS3 animation to the end if the selector is not matching anymore?

I've always thought that CSS3 Animations (differently from CSS3 Transitions) once started, always finish the job, no matter if the selector is not matching anymore the element that activated them.

I'm realizing today that I was probably wrong.

In the following example, an animation is triggered by the :focus and :active pseudo-classes. Focus on the first textfield:

• if you press the tab button slowly, you will see the animations starting and ending correctly;
• if you press the tab button quickly, you will see that once a new element get the focus, the old element's animation immediately ends and disappear.

@-webkit-keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
@keyframes pressed {    
    0%, 100% { transform : scale(1); }
         50% { transform : scale(2); }
}
a:focus, a:active {
    -webkit-animation : pressed 2s; 
            animation : pressed 2s; 
}

a, input {
          border : 1px solid silver; 
         padding : 5px;
          height : 40px;
     line-height : 28px;
          margin : 0px;
         display : inline-block;
           width : 33.3%;
      box-sizing : border-box;  
      background : white; 
  vertical-align : middle;
}

a { 
           color : dodgerBlue; 
 text-decoration : none;}

input {
           color : red;
}

<input type="text" id="foo" value="Start here, then press tab" /><a  href = "#">
Lorem
</a><a  href = "#">
Ipsum
</a><a  href = "#">
dolor
</a><a  href = "#">
sit
</a><a  href = "#">
amet
</a><a  href = "#">
consectetur 
</a><a  href = "#">
adipiscing 
</a><a  href = "#">
elit
</a>

I know I can make it end smoothly (on some browser, eg. Firefox yes, Chrome no) by applying:

    a { transition: all 2s ease; }

so that if it's loaded up to (for example) 40%, it will animate back from 40% to 0% instead of immediately dropping to 0%.

- I also know that I can use jQuery animations instead of CSS3 animation and make it work that way; (EDIT: according to the comment, not even jQuery animations will work this way, if I got that right)

What I'm asking here, as a CSS3 Animation newbie, is:

is there a pure CSS3 way to force the animation to run up to 100%, no matter if the initial condition is not valid anymore ?

via Chebli Mohamed

Slide down navigation with list items moving

I have a navigation that slides down in a way that background color slides down and the list items fade in, but are not moving from the top downwards and that is what i would like to achieve.

Must be simple by adding a top value with addClass/removeClass, but can't seem it to work within the javascript.

Note: .nav-toggle is the hamburger icon which is the trigger that works fine.

Hope someone can help me.

--> Fiddle

Javascript:

// Navigation //

$(function() {
$('.nav-toggle').click(function() {
    event.preventDefault();
    $('nav ul.right-nav').slideFadeToggle(300);
    $('.nav-toggle').toggleClass('is-active');
})
});

$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
    $('nav ul.right-nav').hide();
    $('.nav-toggle').removeClass('is-active');
}
});

$.fn.slideFadeToggle  = function(speed, easing, callback) {
return this.animate({opacity: 'toggle', height: 'toggle'}, speed,  easing, callback);
}; 

Html:

<header>
<nav>
    <div class="mobile-nav">
        <div class="nav-toggle"><i class="nav-icon"></i></div>
    </div>
    <ul class="left-nav">   
        <li class="home"><a href="#">Pixelation</a></li>    
    </ul>
    <ul class="right-nav">  
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
</header>

via Chebli Mohamed