samedi 25 avril 2015

Imacro - Error -921 with a field-wrapper


I m recording an imacro macro.

Here is my script:

VERSION BUILD=8920312 RECORDER=FX
TAB T=1
TAG POS=1 TYPE=EM ATTR=TXT:Lui<SP>écrire
TAG POS=1 TYPE=INPUT:TEXT FORM=ID:postform ATTR=ID:subj CONTENT=Hello
TAG POS=1 TYPE=TEXTAREA FORM=ID:postform ATTR=ID:text CONTENT=Bonjour
TAG POS=1 TYPE=INPUT:CHECKBOX FORM=ID:postform ATTR=ID:inclure CONTENT=YES
TAG POS=1 TYPE=INPUT:SUBMIT FORM=ID:postform ATTR=*

Here is the code in the body of the page:

<div id="form-subj" class="rc-form-field ">
<label for="subj">Sujet :</label>
<span class="field-wrapper">
<input id="subj" type="text" value="" name="subj" maxlength="40">
</span>
</div>

I attached a capture too of the page.

I suppose that the field-wrapper is causing the error.


Angularjs 1.3.15 - Updating $scope after Promise Returned


I'm learning angularjs and trying to update nav bar with user name after login, but the user name does not appear. Here is the process I am following:

  1. User logs in successfully.
  2. After 'then' in login promise (to make sure promise is returned), get user profile via factory which returns the user profile.
  3. After 'success' in getting user profile, save profile to $scope.user so that DOM is updated.

Here is HTML for Nav Bar (not sure if it matters but this is placed into index.html using ng-include on page load):

<nav ng-controller="menuController">
    <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
            Admin Site
        </a>
    </div>
    <ul >
        <li ><span>Welcome {{ user.firstName }}</span></li>
    </ul>
  </div>
</nav>

Here is the menuController js file:

    angular
    .module('myApp')
    .controller("menuController", ['$scope', '$auth', '$timeout', '$window', 'toaster', 'Account',
        function UserCtrl($scope, $auth, $timeout, $window, toaster, Account) {

            $scope.user = [];

            $scope.login = function () {
                $auth.login({email: $scope.email, password: $scope.password})
                    .then(function(response){
                        toaster.pop('success', "Logged In", "You have successfully logged into the system"); // This fires correctly
                        Account.getProfile()
                            .success(function(obj){
                                $scope.user = obj;
                                console.log('User: ' + 
$scope.user.firstName);  //This Works! But user.firstName in HTML is not updated
                            });
                    })
                    .catch(function (response) {
                        toaster.pop('error', "Login Failure", response.data.message);
                    })
            };   
        }
    ]);

The problem is that the user.firstName in the navigation bar never updates with the user's first name. Am I missing something?

Thank you for any help!


Scrollable table contents html/css


I'm trying to make my table contents scrollable, I've had to create a table inside one of the table rows which means if the table has more than one row the contents isn't aligned with the correct heading as showing in the fiddle;

http://ift.tt/1HDmj4z

thead.panel-heading {
    background-color: #242a30;
    border-color: #242a30;
    border-bottom: 1px solid #242a30;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: move;
    width: 100%;
}
thead.panel-heading tr th {
    color: #ffffff;
    font-weight: 500;
    padding: 10px 40px !important;
    text-align: left;
}
tbody.panel-content {
    background-color: #f0f3f4;
}
tbody.panel-content tr td {
    padding: 10px 20px !important;
    text-align: left;
}
tbody div {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 300px;
}
<table>
    <thead class="panel-heading">
        <tr>
            <th>Client</th>
            <th>Client</th>
        </tr>
    </thead>
    <tbody class="panel-content">
        <tr>
            <td>
                <div class="scrollit">
                    <table>
                        <tr>
                            <td>Alex Best</td>
                            <td>Yahoo Answers</td>
                        </tr>
                        <tr>
                            <td>Andrew Smith</td>
                            <td>Monkey Tube</td>
                        </tr>
                        <tr>
                            <td>James Harris</td>
                            <td>Limewire</td>
                        </tr>
                        <tr>
                            <td>Mike Anderson</td>
                            <td>Twitter</td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

How to obtain innerHTML of an active li link?


I want to store the innerHTML of an active menu item to display it as a title for my page. The title HTML is {{pageTitle}}, in the "container" template.

here is my (cleaned) HTML

<template name="container">
   {{pageTitle}
   {{ > SideMenu}}
</template>

<template name="SideMenu">
    <ul id="menu-items" class="nav nav-stacked nav-pills">
        <li id="menu-item-simple" class="">
            <a href="#">
                menuItem1
            </a>
        </li>
        <li id="menu-item-simple" class="">
            <a href="#">
                menuItem2
            </a>
        </li>
    </ul>
</template>

I created an helper to return the string

Template.container.helpers({
"pageTitle":function(){
    return Session.get("pageTitle");
}
});

And an event to set the string to its correct value when a menu item is clicked

Template.SideMenu.events({
    "click #menu-items":function(e,t){
        var activeItem = $(this).find("li.active")
        Session.set ("pageTitle",activeItem.children("a").innerHTML);
        console.log (activeItem.children("a").innerHTML);
    }
});

The console returns "undefined". I don't get what I am doing wrong and since I'm just beginning, I also wanted to know if I'm going the right way.


WebBrowser iframe not displays when using HttpWebRequest


I use Winform WebBrowser to load an website. The website is contains an iframe. The URL here: http://ift.tt/1v05tFk

When i use Navigate() method to load that URL. The WebBrowser display an texteditor and an iframe.

When i try to use HttpWebRequest to load the website, like this:

    HttpWebRequest myRequest = (HttpWebRequest)HttpWebRequest.Create("http://ift.tt/1v05tFk");

    HttpWebResponse myResponse = (HttpWebResponse)myRequest.GetResponse();

    webBrowser1.DocumentStream = myResponse.GetResponseStream();

The WebBrowser is also display an html's texteditor, but the iframe is not displayed. It just show me the iframe's URL. enter image description here Why the WebBrowser not display the iframe contents ? While the HTML,CSS,JS still work, but the Iframe not ?


Different viewport widths for landscape and portrait


My website is more or less optimized for mobile devices, however it needs a minimum width of 480 px. Using

<meta name="viewport" content="width=480">

works well, but only in portrait mode. If I switch to landscape, it uses 480 px too, which makes everything too big. Is there a way with maybe a script to switch to a higher width if landscape (mobile users only) is used? Thank you.


CSS some space at the end of the page, reason floats?


I used the class "section", inside the section are 2 elements. The first one is a div with the class "content" and the secound one is the aside. I doesn't gave the section a fixed high (the section should grow with the content inside the container "content" & the aside). I floated the container "content" to the left side and the aside to the right side.

My Problem: I gave the section a margin-bottom of 25px, but nothing happens. Thats why i marked the section with a bgcolor (bgcolor = red). But the section is only as high as the aside.

*{
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    color: white;
    text-decoration: none;
}

body{
    background-color: rgb(38, 38, 38);
}

nav{
    width: 100%;
    background-color: rgb(25, 25, 25);
}


.navbar_ul{
    list-style-type: none;
    width: 800px;
    width: 1000px;
    margin: 0 auto;
}

.navbar_li{
    display: inline-block;
    margin-top: 10px; 
    margin-bottom: 10px;
    margin-right: 30px;
}

a{
    color: #666;
    display: block;
    transition: color 0.2s ease-in-out 0s;
}

a:hover{
    color: #CCC;
}

section{
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 50px;
    width: 1012px;
    height: 1000px;
    background-color: red;
}

.content{
    width: 750px;
    border: 3px solid rgb(30, 30, 30);
    background-color: rgb(75, 75, 75);
    float: left;
}

aside{
    width: 200px;
    float: right;
}

p{
    padding: 10px;
    width: 730px;
    text-align: justify;
}

.asd{
    padding: 10px;
    text-align: justify; 
}

.header{
    width: 100%;
    background: linear-gradient(to bottom, #191919 0px, #373737 100%) repeat scroll 0% 0% transparent;
    text-align: center;
    padding: 10px 0px;
}
<!DOCTYPE html>

<html>
    <head>
        <title>XXX</title>
        <link rel="shortcut icon" href="title.png" type="image/png" />
        <link rel="stylesheet" type="text/css" href="index.css">
        <meta charset="utf-8" /> 
    </head>
    
    <body>
        <nav>
            <ul class="navbar_ul">
                <li class="navbar_li"><a href="http://www.google.de">Seite erstellen</a></li>
                <li class="navbar_li"><a href="http://www.google.de">Seite löschen</a></li>
                <li class="navbar_li"><a href="http://www.google.de">Seite bearbeiten</a></li>
            </ul>
        </nav>
        
        <section>
            <div class="content">
                <div class="header">Überschrift des Artikels</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 1 "erstellen"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatpsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 2 "bearbeiten"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <div class="header">Schritt 3 "löschen"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                
                
                
                
                
                
                
                
                
                
                
                <div class="header">Schritt 4 "mit Bild"</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            
            <aside>
            <a class="asd">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsu. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatm dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a>
            </aside>
        </section>
    </body>
</html>

How to get the text from a specific closest element?


I've been learning to code by my own and to do some fancy stuff with jquery library but I'm stuck here. This is what I got:

<span class='ccy'>San Diego</span><span class='dc'> X</span>
<span class='ccy'>San francisco</span><span class='dc'> X</span>
<span class='ccy'>Palo alto</span><span class='dc'> X</span>

I want to be able to click in the $("span.dc") and get only the text() of the < span> next to it (the name of the city), works fine if there is only one city in the html, but as long as I keep adding them up the result gets messy and I end up with a string containing all the city names and I only need one.

I know that the obvious thing would be give them a different id to each one but it'd get even messier 'cause the that html is dynamically generated depending on a previous event triggered by the user, the cities come from an array and I need the individual name of the city to delete from it if 'x' is clicked, I hope I've explained myself good enough.

jsfiddle here!! so you can see better what I mean


Changing the wrapper tag for inserted elements in Cocoon for Rails


I was wondering if it were at all possible to change the element type of the wrapper for newly inserted inputs. Going through the docs I was unable to find a way in doing so.

Simply put I need to change nested-fields div into a table and change the inserted inputs, that have a class of input into trs with the inputs wrapped inside tds. This would look something like this:

<table class="track-form nested-fields">
  <tr><td><%= f.input :disc %></td></tr>
  <tr><td><%= f.input :number %></td></tr>
  <tr><td><%= f.input :name %></td></tr>
</table>

Unfortunately manually changing these tags is only ignored when the views are rendered. Here's what the view code currently looks like without the table elements added:

Form View

<%= simple_form_for(@album) do |f| %>
  <div class="form-inputs">
    ...
  </div>

  <div class="form-inputs">
    <%= f.simple_fields_for :tracks, tag: "table" do |track| %>
      <%= render 'track_fields', :f => track %>
    <% end %>

    <div id='links'>
      <%= link_to_add_association 'Add a Track', f, :tracks %>
    </div>
  </div>

Partial

<div class="track-form nested-fields">
  <%= f.input :disc %>
  <%= f.input :number %>
  <%= f.input :name %>

  <%= link_to_remove_association "remove track", f %>
</div>


How can we remove space between two li?


I have the following HTML:

<ul class="navlist">
    <li><a href="index.html">Home</a></li>
    <li><a href="agenda.html">Agenda</a></li>
    <li><a href="presenters.html">Presenters</a></li>                       
</ul>

And I'm using this CSS:

.navlist {  
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
    height: 33px;
}

.navlist li a {   
    text-decoration: none;
    font-size: 18px;
    color: white;
    background: #63B3E4;
    padding: 10px 45px 12px;
}

.navlist li a:hover {
    color: #63B3E4;
    background: white;
}

.navlist li {display: inline;}

As shown in a fiddle, there is whitespace between the li elements. How do I remove that whitespace?


Bootstrap custom navbar with images


i tried to make a custom navbar since the standart navbar isnt really what i desire. It looks too casual so i try instead of using for the navbar, images.

I cant get them 4 images to line up in a row.

I saw there are 2 types of making it, once is defining a class through CSS and the other one is directly in the index.html. Are there any difrences in those 2 methodes?

Help would be super appericated. I tried like 30 websites with parts of the code but it seems like nothing is working im wondering what i do wrong.

greeting Queen

.navbar {
max-width:960px;
text-align:center;
}

.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}

.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}

.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
<body>
<div class="navbar">
        <div class="navbar-special">
            <ul class="nav">
<li class="home"><a href="#"><img src="http://ift.tt/1IVZxDT" /></a></li>
<li class="search"><a href="#"><img src="http://ift.tt/1bEmu44" /></a></li>
<li class="logo"><a href="#"><img src="http://ift.tt/1IVZxDX" /></a></li>
<li class="partner"><a href="#"><img src="http://ift.tt/1bEmwsF" /></a></li>
        </div> <!-- div closing navbar -->
    </div><!-- div closing navbar -->
</body>

http://ift.tt/1IVZwjg


No scrolling after closing lightbox (blueimp)


I built my own website and wanted to add different galleries, so I tried blueimp. It works perfectly, but when I'm closing the lightbox, I'm not able to scroll on my page anymore. Can somebody please help me?

Here's a little code snippet:

<div id="artworks">
    <a href="gallery/artworks/test1.jpg" title="test1" data-gallery="#blueimp-gallery-artworks" class="btn btn-primary btn-lg" role="button">TAKE A LOOK</a>
    <a href="gallery/artworks/test2.jpg" title="test2" data-gallery="#blueimp-gallery-artworks"></a>
</div>

<!-- blueimp Gallery lightbox -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

<!-- scripts -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.blueimp-gallery.min.js"></script>
<script>
document.getElementById('artworks').onclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement,
        link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
    blueimp.Gallery(links, options);
};
</script>


mvc entity framework displaying image in view, base64 issue?


Not sure if I am doing this correctly but my image is not displaying anything as I understood it data:image/jpeg;base64 should convert the image, this part confuses me aswell "\"" at the end of the image src, the content of the image src is huge and looks like base64 but is not rendering as an image?

Details View:

<img class="img-responsive" src="@Html.Raw("data:image/jpeg;base64," + ViewBag.ImageToShow + "\"")" alt="">

The output I get is:

enter image description here

Controller:

    // GET: /Post/Details/5
    //[Authorize]
    public ActionResult Details(string urlslug)
    {
        Post post = db.Posts.First(m => m.UrlSlug == urlslug);
        byte[] buffer = post.Picture;
        ViewBag.ImageToShow = Convert.ToBase64String(buffer);
        if (post == null)
        {
            return HttpNotFound();
        }
        return View(post);
    }


CSS For Multiple Divs


I'm trying to build a website like the image in link below... I confused about using multiple DIVs and my code doesn't work well... I googled this issue and found some guides about using WRAPPER stuff, but I don't know how to use this method... one of my biggest problem in my code is that I can't set a background-image for my MAIN DIV, and the background-image starts from behind slideshow div...but i want it started after my slideshow... in the image of website structure, Div 4, Div 5 and div 6, contain social networks embedded codes... I will appreciate if someone help me through this issue...

http://ift.tt/1JoThIa

@font-face {
font-family: 'Myriad Pro Bold';
font-style: normal;
font-weight: normal;
src: url('../Fonts/MYRIADPRO-BOLD.woff') format('woff');
}

body
{
    width: 100%;
    background-image: url('../Images/bg.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:fixed;
      
}

#HeaderDiv
{
    position: relative;
    width: 100%;
    height: 70px;
    line-height: 75px;
    z-index: 10;
    margin-top: -410px;
    background-image: url('../Images/Header.png');
    background-repeat: repeat;
    color: White;
    font-family: 'Myriad Pro Bold';
    font-size: 26pt;
    text-align: center;
}


.GalHead
{
    font-size: 100px;
    font-family: Arial;
    color: #fff;
    margin-top: 150px;
    text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
    
}


/************************************************************************

*************************************************************************/

nav 
{
  max-width: 1024px;
  margin: 0 auto;
  padding: 30px 0;
  margin-top: 370px;
}

nav ul 
{
  text-align: center;
  width: 100%;
}

nav ul li 
{
  display: inline-block;
}

nav ul li a 
{
  margin: 10px;
  padding: 5px;
  font-family: Arial;
  font-weight: 600;
  color: #000;
  font-size: 22px;
  text-decoration: none;
  display: block;
}

nav ul li a:hover 
{
  outline: 3px solid #890e10;
 
}

/************************************************************************

*************************************************************************/
#OutterVimeo
{ 
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px;
    height: 370px;
    background-image: url('../Images/Wopacity.png');
    background-repeat: repeat;
    border: 1px solid #666666;
}

#InnerVimeo
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 625px;
    height: 350px;
    margin: auto;
}

#SpecterDiv
{ 
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    height: 150px;
    background-image: url('../Images/Wopacity.png');
    background-repeat: repeat;
    border: 1px solid #666666;
    text-align: justify;
    font-family: Arial;
    font-weight:bold;
    padding: 0;
}

#OutterSocial
{ 
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    height: 650px;
    background-image: url('../Images/Wopacity.png');
    background-repeat: repeat;
    border: 1px solid #666666;
}

#FooterDiv
{
    width: 100%;
    height: 100px;
    background-image: url('../Images/Header.png');
    background-repeat: repeat;
    border-top: 4px solid #890e10;
    color: White;
    font-family: Arial;
    line-height: 50px;
}

.twitter-timeline
{
    width: 225px;
    height: 600px;
}

#content
{
    width:100%;
    height:100%;
    border-style: solid;
    border: 3px;
    border-color: Black;    
}

.column
{
    margin-top: 30px;
    float: left;
    position: relative;
    width: 315px;
    margin-left: 20px;
    background: #fff;
    height: 600px;
    border-style: solid;
    border: 5px;
    border-color: Black;
}
<body>
    <script>    (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
            fjs.parentNode.insertBefore(js, fjs);
        } (document, 'script', 'facebook-jssdk'));
    </script>
    <form id="form1" runat="server">
    
        <center>
        <div class="center">
            <ul class='aviaslider' id="frontpage-slider">
                    <li><img src="images/slides/1.jpg" alt="" /></li>
                    <li><img src="images/slides/2.jpg" alt="" /></li>
                    <li><img src="images/slides/3.jpg" alt="" /></li>
                    <li><img src="images/slides/4.jpg" alt="" /></li>
                    <li><img src="images/slides/5.jpg" alt="" /></li>
            </ul>         
            <div id="main">       
            <!-- end center-->
            </div>
        </div>
        </center>
        <div id="HeaderDiv">
            <a href="http://ift.tt/ieOZPP"><img src="Images/Kickstarter.png" alt="KickStarterlogo"></a>
        </div>

        <div id="Menu">
            <nav>
                <ul>
                    <li>
                        <a href="#">ABOUT</a>
                    </li>
                    <li>
                        <a href="#">FILM MAKERS</a>
                    </li>
                    <li>
                        <a href="Gallery.aspx">GALLERY</a>
                    </li>
                    <li>
                        <a href="#">PRESS</a>
                    </li>
                    <li>
                        <a href="#">NEWS</a>
                    </li>
                    <li>
                        <a href="#">DONORS WALL</a>
                    </li>
                </ul>
            </nav>
        </div>
        
        <div id="OutterVimeo">
        <center>
            <div id="InnerVimeo">
                <iframe src="" width="623" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
        </center>
        </div>
        <div id="SpecterDiv">
            <p style="text-align: center;">
                <strong><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><big><span style="color: rgb(178, 34, 34);">SPECTER :</span></big></span></span></strong><br />
                <span style="font-size:17px;"><span style="font-family: arial,helvetica,sans-serif;"></span>
                </span>
            </p>
        </div>
        <div id="OutterSocial">
            <div id="content">
                <div class="column">
                    <a class="twitter-timeline"  href="https://twitter.com/"  data-widget-id="495829350265012224">Tweets by </a>
                    <script>        !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } } (document, "script", "twitter-wjs");</script>


                </div>
                <div class="column" style="background:none;"><iframe frameborder="0" height="100%" scrolling="no" src="" width="310"></iframe></div>
                <div class="column"><div class="fb-like-box" data-href="http://ift.tt/g8FRpY" data-width="315" data-height="600" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="false"></div></div>
            </div>
        </div>
        <div id="FooterDiv">
            <center>
                &#0169 2014 All Right Reserved
                <br />
                Developed By
            </center>
        </div>
    </form>
</body>

Showing the desktop version of a fully responsive website on tablets


How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)

Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.

I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?

I feel like I'm missing a very obvious trick!


Multi-line CSS gradient text not working


I'm writing a theme for WordPress and am making use of Webkit text gradients for links. It's working so far, but as soon as the link wraps around to the next line, only the top half of the link is visible.

Example code:

CSS:

#page a:link {
  background: -webkit-repeating-linear-gradient(top, #cade43, #8a953e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: bold;
}

#page {
    background: black;
    width: 100px;
}

HTML:

<div id="page">
    <a href="#">This is a long link that stretches over two lines</a>
</div>

JSFiddle of the example: http://ift.tt/1IVUFi7

JSFiddle Example. Bottom two lines selected to show they do exist

The image above is what appears in my browser (Chrome 43.0.2357.37 beta-m). I've selected the last two lines with the cursor to show that they do exist and aren't cut off by the DIV

What can I do to fix this?


Canvas - Arc suddenly vanishes


So I'm making a basic clock just for fun with minute and second arcs. However, after a new minute starts, the minute arc quickly vanishes from the canvas. Why?

Here is a JSFiddle: http://ift.tt/1IVUD9P

HTML

<canvas id="clock"></canvas>

CSS

body,
html {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-family: Josefin Sans, Helvetica, sans-serif;
    background: #1A4978;
}

JS

    var canvas = document.getElementById('clock');
    var context = canvas.getContext('2d');

    function setDimensions() {
        context.canvas.width = window.innerWidth * 0.69;
        context.canvas.height = window.innerHeight;
    }

    setDimensions();

    var x = 0.5 * canvas.width;
    var y = canvas.height / 2;
    var radius = 0.25 * context.canvas.width;
    var startAngle = 0;
    var endAngle = 2 * Math.PI;
    var startAnimationMinuteDone = false;
    var firstTime = false;

    function updateMinute(start, end) {
        if (startAnimationMinuteDone == false && firstTime == false) {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

        setDimensions();
        context.beginPath();
        context.strokeStyle = "#FF7519";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function updateSecond(start, end) {
        context.beginPath();
        context.strokeStyle = "#FFA319";
        radius = 0.25 * context.canvas.width + 20;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    function minuteAntialias(start, end) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        setDimensions();
        context.beginPath();
        context.strokeStyle = "#1A4978";
        context.arc(x, y, radius, start, end);
        context.lineWidth = 20;
        context.stroke();
        context.closePath();
    }

    function secondAntialias(start, end) {
        context.beginPath();
        context.strokeStyle = "#1A4978";
        radius = 0.25 * context.canvas.width + 40;
        context.arc(x, y, radius, start, end);
        context.stroke();
        context.closePath();
    }

    $(document).ready(function() {
        var time = 0;
        var count = 0;

        function clock() {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDay();
            var hour = date.getHours();

            if (hour > 12) {
                hour -= 12;
            }

            var minute = date.getMinutes();
            var second = date.getSeconds();

            var newestMinuteStart = (time + 1.5) * Math.PI;
            var newestSecondStart = (time + 1.5) * Math.PI;

            var cachedTime;

            if (count <= minute / 30 && !startAnimationMinuteDone) {
                time += 0.01;
                updateMinute(1.5 * Math.PI, (time + 1.5) * Math.PI);
                count += 0.01;
                cachedTime = time;

            } else if (!startAnimationMinuteDone) {
                time = 0;
                count = 0;
                startAnimationMinuteDone = true;

            } else if (count <= second / 30 || second == 0 && startAnimationMinuteDone) {
                time += 0.01;
                updateSecond(1.5 * Math.PI, (time + 1.5) * Math.PI);
                secondAntialias(0, 2 * Math.PI); // Arc matching background colour gives the effect of greater sharpness
                count += 0.01;

                if (second == 0) {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    startAnimationMinuteDone = false;
                    firstTime = true;
                    time = 0;
                    count = 0;
                }

                console.log(second);
                console.log(startAnimationMinuteDone);
            }
        }

        setInterval(clock, 10);
    });


How to use a custom toggle switch in jquery mobile


I am using jQuery Mobile as my framework and I do not like the look of the default toggle switch. I wish to use a purely CSS switch. I have found some great examples that I would like to use (basically a square switch with the ability to see both texts at the same time but show which one is active). I have even just copied and pasted the code into my code and it is always completely distorted, not even recognizable. I am starting to believe it is not possible.

If you know of a way can you please explain how to do it?


Fixed text centered on background image


How to position text to be fixed and centered on full page background image. Position absolute doesn't work (my text is on top of the page) and position fixed works but text goes down when I scroll page down. I found tutorial on css tricks but I can't make this to work. Anyone have an idea?

HTML:

<div class="intro">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="banner-content">
                    <h1>Lorem ipsum</h1>
                    <hr />
                    <p>Lorem ipsum dolor sit...</p>
                </div><!-- end banner-content -->
            </div><!-- end col-md-12 !-->
        </div><!-- end row !-->
    </div><!-- end container !-->
</div><!-- end intro !-->

CSS:

.intro {
    width: 100%;
    height: 100%;
    background: url(../images/banner.jpg) no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.banner-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}
.banner-content h1 {
    font-size: 4em;
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-style: italic;
}
.banner-content p {
    color: #fff;
    text-align: center;
    font-style: italic;
    font-size: 1.7em;
}
.banner-content hr {
    width: 100%;
    max-width: 750px;
    border: 1px solid #fff;
}


Why I can't applied spacing between two divs


I have 5 div, and between first and second I have spacing set on button2 class margin-top:10px; But that's applied only between second and first div, why I don't have spacing between thrid and second ... I don't know why I have little spacing between third and fourth divs.

JSFIDDLE: http://ift.tt/1bEjncm

HTML

<div class="contactdiv"><div class="ppdiv">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren ppdiv--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2">
<button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2--><div class="button2"><button class="ppenvelope"><img src="http://ift.tt/1IVUEuw" alt="Slika"></button><button class="pptext"><span class="pptext2">PRIVATNA PORUKA</span></button>
</div><!--Zatvoren button2-->
</div><!--Zatvoren contactdiv-->

CSS:

.contactdiv{
    width:271px;
}
.ppdiv{
    overflow: hidden;
    margin-top:20px;
    margin-left: 20px;
}
.ppenvelope, .pptext {
    float: left;
    border: none;
    height: 48px;
}
.ppenvelope{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2d4dd;
}
.ppdiv img{
    padding:10px;
}
.button2 img{
    padding:10px;
}

.pptext{
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #c9e0e6;
    color:#4c6974;
}
.pptext2{
    display: inline-block;
     color:#4c6974;
       padding-top: 13px;
       padding-bottom:13px;
       padding-left: 13px;
        padding-right: 13px;
}
.button2{
    margin-top: 10px;
    margin-left:20px;
}


JQuery Mobile creates wrong HTML code


I'm currently developing a PhoneGap Application for Android using JQuery Mobile. All i want, is to dynamically change the header text of a collapsible:

<div data-role="collapsible" id="collapse">
   <h3>I'm a header</h3>
   <p>I'm the collapsible content</p>
</div>

That code is from demos.jquerymobile.com. Chrome DevTools gives me the following html for this example: http://ift.tt/1HCVBut

For any reason, if i copy exactly the same code to my index.html and run it, chrome DevTools gives me the following html: http://ift.tt/1Gt3UWD

Why are there different html codes?

I actually can change the header's text by

$("#collapse").text("new text");

but then it looses all the styling and also

$("#collapse").trigger('create').

doesn't do anything. What am I doing wrong?


Display info from a xsql page inside of my HTML page


I have my xSQL, XSL, and HTML functioning properly.

http://ift.tt/1aWveBf

I can go here and search for the player first name "Lucas" and last name "Gass". I am whisked away to the xSQL page and the info displays properly. I would like to be able to have this information generate within the context of my players.html page. So the entire site continues to have the look and feel of my HTML.

What is the best way to go about this?


XSL stylesheet keeps Firefox from recognising DTD-defined ids


I want a client-side XSL-transformed document with elements targettable (jumpable to) by #foo (URL fragments). Problem is, as soon as I attach the simplest XSL stylesheet, Firefox stops scrolling to the elements. Here's simple code:

test.xml:

<?xml version='1.0' encoding='UTF-8'?>
<?xml-stylesheet type='text/xsl' href='test.xsl'?>
<!DOCTYPE foo [<!ATTLIST bar id ID #REQUIRED>]>
<foo xmlns:html='http://ift.tt/lH0Osb' xml:lang='en-GB'>
<html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/><html:br/>
<bar id='baz'>Baf.</bar>
</foo>

test.xsl:

<xsl:stylesheet version='1.0' xmlns:html='http://ift.tt/lH0Osb' xmlns:xsl='http://ift.tt/tCZ8VR'>
<xsl:template match='/'>
<xsl:copy-of select='.'/>
</xsl:template>
</xsl:stylesheet>

As soon as I uncomment the stylesheet line, /test.xml#baz does nothing. As though the transformation somehow loses some data about elements' identification.

Any ideas? Thanks.


How to use variable in href and pass to click event function to javascript


I have several href links in my jade and each link is generated using a variable passed in by some variables.

The code in jade is like this:

each rows in meters
    li: a#myLink(href= "/meters/" + rows.meterID)= rows.metername

So in my JavaScript part, I added a event listener to each link so that want to generate different pages according to the variables. So that I can add an event listener and emit that variable using socket like this:

  document.getElementById("myLink").addEventListener("click", function(){
     document.getElementById("visualization").innerHTML = "";
     socket.emit('building', window.location.pathname);
  });

Any help would be appreciated!


How to make JavaScript work when button is pressed?


I am a bit of a newbie in JS and not too sure what I'm doing.

I have created a button

<div id="btn">
    <a href='dg-quiz-maker.js' class='button'>ATTEMPT A QUIZ</a>
</div>

I want when the user presses the button, the JS dg-quiz-makes.js file appears. I'm not sure how to I do it. Please help.


Select label of a checked checkbox that is wrapped over the checkbox with pure CSS


I need to select a label of a checked checkbox. This would be super easy if the label was underneath the checkbox. One could use the + selector then.

But what about a structure like this:

<label>
    <input type="checkbox" checked>
</label>

Am I right that it turned impossible now to select the label of the checked input with pure CSS?

Seems odd to me because I like the above structure more.


How to know which index in the class is clicked


Looking at this link , I was thinking classes are actually indexed. If I have this code, how can I get in JavaScript or jQuery the index of the class of the button clicked?

<button class="class_name" id="b1"></button>
<button class="class_name" id="b2"></button>


print a html page using python [duplicate]


This question already has an answer here:

I have a html page.

#test.html
<html>
    <body>
        This is print using Python
    </body>
</html>

I want to print this test.html using python code. Hoe can we send html file to printer to print ? I want to create a function which I will assign to a button. After user clicks the button, HTML page will automatically get printed on the default printer. It needs to render as browser.


Parse error: syntax error, unexpected T_STRING on line 12 [duplicate]


This question already has an answer here:

Hello all I ve a problem with php editing so my problem is:

Parse error: syntax error, unexpected 'select' (T_STRING) in C:\Program Files (x86)\EasyPHP-DevServer-14.1VC11\data\localweb\projects\toppvp.php on line 12

and here is my php file

<

    ?php

    $db_user = "root";
    $db_pass = "";
    $db_name_gs = "l2jgs";
    $db_name_ls = "l2jls";
    $db_name_cs = "l2jcs";
    $res = mysql_connect ( $db_serv, $db_user, $db_pass ) or die ("Coudn't connect to [$db_serv]");
        $resdb = mysql_select_db ( $db_name_gs, $res ) or die (mysql_error("Cannot connect to Game Server"));
        $resdb = mysql_select_db ( $db_name_ls, $res ) or die (mysql_error("Cannot connect to Login Server"));
        $resdb = mysql_select_db ( $db_name_cs, $res ) or die (mysql_error("Cannot connect to Community Server));
    $res="select characters.char_name,characters.pvpkills,char_templates.ClassName,characters.online,characters.accesslevel from characters,char_templates where characters.classid=char_templates.Classid order by characters.pvpkills DESC LIMIT 20";
    echo"<html><head></head><body bgcolor='#000000' style='color:rgb(200,200,200)'>";
    echo "<table  border='2' align=center width=440>";
    echo "<tr><th>Nr</th><th>Name</th><th>PvP Kills</th><th>Main class</th><th>Status</th></tr>\n";
    if ($result=mysqli_query($con, $sql)or die("Bed Sql syntax")) {
      $nr=1;
    while ($row=mysql_fetch_row($result)) {
         echo "<tr><td align=center>".$nr."</td>";
         $nr++;
        echo "<td align=center>".$row[0]."</td>";
        echo "<td align=center>".$row[1]."</td>";
        echo "<td align=center>".$row[2]."</td>";
        if($row[4]==0)
        {   
            if($row[3])
            {echo "<td align=center style='color:rgb(0,255,0)'>Online</td></tr>\n"; }
             else{echo "<td align=center style='color:rgb(255,0,0)'>Offline</td></tr>\n";}
        }
         else{echo "<td align=center style='color:rgb(255,0,0)'>Hidden</td></tr>\n";}
    }
    }else{ echo "<!-- SQL Error ".mysql_error()." -->";}

    echo "</table></body></html>";


    ?>

I searched 2 hours to find an solution and i saw same question like mine on this forum but didnt find a suitable one :(

Would appreciate if someone help me Thank You,


Category selection form (PHP and HTML Help)


Hi i want to make form with category Cash Grow Baby , Item Growable Baby and Chicken selection from the following coding:

foreach ($dateinfo2 as $key => $time){
$uInfo = $_SESSION['data']->table('units')->byName($key)->data();
    if ($uInfo["className"] != 'CashGrowableBaby' && $uInfo["className"] != 'ItemGrowableBaby' && $uInfo["keyword"] != 'chicken') continue;
}

and right now i'm using below codes to get results of those different categories

foreach ($dateinfo2 as $key => $time){
$uInfo = $_SESSION['data']->table('units')->byName($key)->data();
    if ($uInfo["className"] != 'CashGrowableBaby') continue;
    // if ($uInfo["className"] != 'ItemGrowableBaby') continue;
    // if ($uInfo["keyword"] != 'chicken') continue;

sorry to bother but i don't know how to make segments of a full statement to get results in the desire category selection :(


JavaScript plugin initialization in Polymer Shadow DOM


I tried to use this plugin with Polymer, but it did't work. I use a Javascript version of this plugin. I have also used domReady: function{}. What is the problem?

Shadow DOM:

    <link rel="import" href="../../bower_components/polymer/polymer.html">
<script src="../../assets/plugins/perfect-scrollbar/js/perfect-scrollbar.js"></script>
<polymer-element name="paper-scrollbar">
    <template>
        <!-- begin element CSS -->
        <link rel="stylesheet" href="../../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css">
        <style>
            .scrollbar-container {
                width: 100%;
                height: 100%;
                overflow: auto;
                position: relative;
                margin: 0;
            }
        </style>
        <!-- end element CSS-->
        <!-- begin element HTML -->
        <div class="scrollbar-container">
            <content></content>
        </div>
        <!-- end element HTML -->
    </template>
    <!-- begin element JavaScript -->
    <script>
        Polymer('paper-scrollbar', {
            ready: function () {
                var container = document.querySelector('.scrollbar-container');

                Ps.initialize(container);
            }
        });
    </script>
    <!-- end element JavaScript -->
</polymer-element>


PHP - How to get images from Instagram for more than 1 tag


Guys I'm working on a PHP script which is getting all images for a specific tag in Instagram.

Here is my code:

<?PHP
 function callInstagram($url)
    {
    $ch = curl_init();
    curl_setopt_array($ch, array(
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_SSL_VERIFYHOST => 2
    ));

    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
    }

    $tag = "sweden";
    $client_id = "1e0f576fbdb44e299924a93cace24507";
    $Next_URL = $_GET["nexturl"];
    if($Next_URL == ""){
    $url = 'http://ift.tt/SUv5zZ'.$tag.'/media/recent?client_id='.$client_id.'&count=24';
    } else {
    $url =  $Next_URL;
    }
    $inst_stream = callInstagram($url);
    $results = json_decode($inst_stream, true);
    $maxid = $results['pagination']['next_max_id'];
    $nexturl = $results['pagination']['next_url'];
    //Now parse through the $results array to display your results... 
    ?>
    <div class="holder" style="display:block;margin-left:70px;">
    <?PHP
    foreach($results['data'] as $item){
        $image_link = $item['images']['thumbnail']['url'];
        $big_image = $item['images']['standard_resolution']['url'];
    echo "Image: $image_link";
    }

This script is getting information about only one tag - sweden.

How can I make this code get all the information about more then one tag, for example let's say for another two tags - england and germany ?

Thanks in advance!


header redirect with include file


I've looked around on here and couldn't locate any solution for my little problem.

I currently have this following IF statment

if($page==1) {
    $sql = "UPDATE page SET page='1' WHERE id=1";
          INCLUDE 'month.php';
          header("Refresh: 10; url=http://XXXXX.co.uk/?p=2");           
    }

Which currently updates a database according to what page it is on and then includes the current month calendar file and I hoped I could redirect it to page number 2 which is very much similar but loads another calendar and the SQL adds +2 to the database.

In essence it's just a loop I've made and it just reads a SQL database to see what page it needs to load next< I know there's better ways to create a loop (just to scroll through 3 PHP pages) but I'm not that great at PHP..

So i'm just wondering really, could anybody help me to have that include statement along with the header refresh?

Like said the purpose is so that the pages rolls a loop, I've managed to get it all to work with an iframe (instead of the header) but it takes a few seconds longer for the frame window to load.


How to Find all Occurances of a Substring in C


I am trying to write a parsing program in C that will take certain segments of text from an HTML document. To do this, I need to find every instance of the substring "name": in the document; however, the C function strstr only finds the first instance of a substring. I cannot find a function that finds anything beyond the first instance, and I have considered deleting each substring after I find it so that strstr will return the next one. I cannot get either of these approaches to work. Any suggestions? Thanks.

By the way, I know the while loop limits this to six iterations, but I was just testing this to see if I could get the function to work in the first place.

                    while(entry_count < 6)
                    {   
                        printf("test");
                        if((ptr = strstr(buffer, "\"name\":")) != NULL)
                        {   
                            ptr += 8;
                            int i = 0;
                            while(*ptr != '\"')
                            {   
                                company_name[i] = *ptr;
                                ptr++;
                                i++;
                            }   
                            company_name[i] = '\n';
                            int j;
                            for(j = 0; company_name[j] != '\n'; j++)
                                printf("%c", company_name[j]);
                            printf("\n");
                            strtok(buffer, "\"name\":");
                            entry_count++;
                        }   
                    }   


Cannot get element by id in Javascript


This code:

onload = function() { document.getElementById('123').classList.add('hidden'); }

does not work... I have this image:

<img src="/img/screenshots/iPhoneMacbook.png" width="100%" id="123">

and Safari shows the error message:

[Error] TypeError: null is not an object (evaluating 'document.getElementById('test').classList')
onload (PlanHW.js, line 5)


How to force free jqgrid do draw frozen column borders for search toolbar


If actions column has caption "Activity"/custom settings and is frozen, free jqgrid does not draw colum borders for this column in search toolbar.

To reproduce, open page in

http://ift.tt/1ddtZ2s

Vertical lines does not appear in search toolbar:

no borders

How to fix this so that column borders appear for Activity column in search toolbar ? Demo in http://ift.tt/1ddu1r6 has borders.

In testcase styles from answer in Remove dancing effect in Chrome from free jqgrid toolbar buttons in font awesome icons are used are used to remove borders from toolbar buttons. Maybe those remove column border also.


How to get a table class which is being displayed through ajax


I have a main page which has a div with the id of displayTable. In that a table GETs loaded through AJAX from another php page.

The table is laid out like this:

<div class="table-responsive">
      <table class="table table-bordered table table-condensed">
        <thead>
          <tr>
            <td>Name</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Blah Blah</td>
            <td>Total</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Dilbert</td>
            <td>Rob</td>
            <td>Blah</td>
            <td>Blah</td>
            <td>Blah Blah Blah</td>
          </tr>
        </tbody>
      </table>
    </div>

I am attempting at using this jquery code to make the first tr fixed. So, in the example above, Dilbert and Name would be fixed and the rest is scrollable. However, I cannot seem to get to the table and it doesn't seem to affect it or do anything.

    var $table = $('#displayTable .table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('my-sticky-col');

    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

    $fixedColumn.find('tr').each(function (i, elem) {
    $(this).height($table.find('tr:eq(' + i + ')').height());
    });


Javascript fails to get the value of a text input [on hold]


My code below works if I manually set the value of command, but if I try to get the value dynamically the code stops working altogether. I isolated the line of code which seems to be the problem(comment after it saying it is where the error is).

If I comment the line alert(document.getElementById("cdmTxt").value); it works as intended.

<?php
session_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type='text/javascript'>

function exec(){
    alert("hi");
    alert(document.getElementById("cdmTxt").value); //does not seem to execute???
    var command = "word";
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var txtToUpdate = document.getElementById("txtHint");
            txtToUpdate.innerHTML = txtToUpdate.innerHTML + xmlhttp.responseText + "<br/><br/>";
        }
    }
    xmlhttp.open("GET", "HAS-sync.php?exec=" + command, true);
    xmlhttp.send();
}
</script>
<style type="text/css">
.auto-style1 {
    margin-top: 0px;
}
</style>
</head>

<body>

<table style="width: 100%">
    <tr>
        <td style="width: 141px; height: 390px">Managers<br /> DHTs</td>
        <td name="targetThing" style="height: 390px">
            <form onsubmit="exec();return false">
                <input id="cmdTxt" class="auto-style1" name="Text1" type="text">
                <input type="submit">
            </form>
            <br />
            <div id="txtHint" style="overflow: scroll; border:1px solid black;width:80%;height:80%"></div>
        </td>
    </tr>
</table>

</body>

</html>

Any help with this is greatly appreciated!


IFRAME Outlook Calendar (Office365)


I'm building a script which jumps around to index.php?p=1 - 3 which loads the calendars in what I hoped would be an iframe however Ive just found out that they are blocked.

Is there any alternative?


CSS Header style not applied to children


I am beginner to UI World, trying to style and arrange html components in one of my example, but I could not see the style applied for all the children of HTML header component. Here is what I have tried Demo in JsFiddle

Code :

<header class="page_header_style">
     <div>
         <div class="title_style">
             Main Title
         </div>
         <div>
            <ul class="user_style">
                <li>Welcome Srk</li>
                <li><a href="">Logout</a></li>
            </ul>  
          </div>    
     </div>
</header>

I would like to see the second div i.e., Welcome message & a list in the same line of the title.


Transform XML to HTML in XSLT with string length condition


I have a XML file using TEI build like that:

<div type="chapter" n="1">
        <p>
          <s xml:id="e_1">sentence e1.</s>
          <s xml:id="f_1">sentence f1</s>
        </p>
        <p>
            <s xml:id="e_2"> sentence e2</s>
            <s xml:id="f_2"> sentence f2</s>
        </p>
</div>

<div type="chapter" n="2">
        <!-- -->
</div>

I need to transform it to this HTML structure:

<div>
<h1>Chapter 1</h1>
<div class="book-content">
 <p>
    <span class='source-language-sent' data-source-id='1'>sentence e1.</span>
    <span id='1' style='display:none'>sentence f1</span>
 </p>
 <p>
    <span class='source-language-sent' data-source-id='2'>sentence e2</span>
    <span id='2' style='display:none'>sentence f2</span>
 </p>
</div>
</div>
<div>
<h1>Chapter 2</h1>
<div class="book-content">
  <!-- -->
</div>
</div>

for now I use this XSLT file:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://ift.tt/tCZ8VR" xmlns:tei="http://ift.tt/1dDT9n4" version="1.0">
   <xsl:output method="html" encoding="UTF-8" indent="yes" />

   <xsl:template match="tei:body">
      <xsl:apply-templates />
   </xsl:template>

   <xsl:template match="tei:teiHeader">
      <xsl:comment>
         <xsl:apply-templates select="node()" />
      </xsl:comment>
   </xsl:template>

   <!--create chapter-->
   <xsl:template match="tei:div">
      <xsl:element name="div">
         <xsl:element name="div">
            <xsl:attribute name="class">
               <xsl:text>book-content</xsl:text>
            </xsl:attribute>
            <xsl:element name="h1">
               <xsl:text>Chapter</xsl:text>
               <xsl:value-of select="@n" />
            </xsl:element>
            <xsl:apply-templates select="node()" />
         </xsl:element>
      </xsl:element>
   </xsl:template>

   <!-- create p-->
   <xsl:template match="tei:p">
      <xsl:element name="p">
         <xsl:apply-templates />
      </xsl:element>
   </xsl:template>

   <!-- create s-->
   <xsl:template match="tei:s">
      <xsl:variable name="xmlid" select="@xml:id" />
      <xsl:if test="starts-with($xmlid, 'e')">
         <xsl:element name="span">
            <xsl:attribute name="class">
               <xsl:text>source-language-sent</xsl:text>
            </xsl:attribute>
            <xsl:attribute name="data-source-id">
               <xsl:value-of select="substring($xmlid, 3, 4)" />
            </xsl:attribute>
            <xsl:apply-templates select="node()" />
         </xsl:element>
      </xsl:if>
      <xsl:if test="starts-with($xmlid, 'f')">
         <xsl:element name="span">
            <xsl:attribute name="style">
               <xsl:text>display:none</xsl:text>
            </xsl:attribute>
            <xsl:attribute name="id">
               <xsl:value-of select="substring($xmlid, 3, 4)" />
            </xsl:attribute>
            <xsl:apply-templates select="node()" />
         </xsl:element>
      </xsl:if>
   </xsl:template>

</xsl:stylesheet>

My problem is that I need to create a new <div class="book-chapter"> foreach 900 characters. But I don't want to cut my s elements so I need to calculate how many selement do I have to include in one <div class="book-chapter">to have somethings like 900 characters.


HTML&CSS: Foundation as floating div on the fullpage.js plugin


I'm trying to use foundation as a floating div on top of my fullpage The foundation has some interactive elements in it (changing text sizes, etc)

example can be seen here: http://ift.tt/1bE9L1n

everything is working so far so good the only problem is that the content of the slides moves aswel when the text in foundation div moves... (i'd like the content of the slides to stay at the same place)

is my div not floating afterall? been looking for hours now and cant really find the problem. Anyone has a clue what I'm doing wrong?

The interactive foundation is btw not affecting the on scroll rotating 'Athene' text (= which is good)

this is the css I used for the foundation div

#foundation {
    position:absolute;
    height: 100%;
    display:block;
    width: 100%;
    background: transparent;
    z-index:999;
}

Thanks in advance & Best Regards to all of you


Changing a wrapper tag in SimpleForm


I've read the docs on how to customize wrapper's globally in SimpleForm but what I'd like to do is change the wrapper specially for one view and the partial inside of it. Right now the partial is wrapped in a div with the class name nested-fields.

With the use of cocoon I'm also dynamically inserting new inputs that are also wrapped in divs.

Simply put I need to change nested-fields div into a table and change the inserted inputs, that have a class of input into trs with the inputs wrapped inside tds. This would look something like this:

<table class="track-form nested-fields">
  <tr><td><%= f.input :disc %></td></tr>
  <tr><td><%= f.input :number %></td></tr>
  <tr><td><%= f.input :name %></td></tr>
</table>

Unfortunately manually changing these tags is only ignored when the views are rendered. Here's what the view code currently looks like without the table elements added:

Form View

<%= simple_form_for(@album) do |f| %>
  <div class="form-inputs">
    ...
  </div>

  <div class="form-inputs">
    <%= f.simple_fields_for :tracks, tag: "table" do |track| %>
      <%= render 'track_fields', :f => track %>
    <% end %>

    <div id='links'>
      <%= link_to_add_association 'Add a Track', f, :tracks %>
    </div>
  </div>

Partial

<div class="track-form nested-fields">
  <%= f.input :disc %>
  <%= f.input :number %>
  <%= f.input :name %>

  <%= link_to_remove_association "remove track", f %>
</div>


Dynamically generated webpage scraping


I'm trying to build a parser which can download a data from web page. The problem is that the page is probably "dynamically generated". There is some code in curly brackets which generates html code probably. It seems like Django code.

Here is a pattern:

<script charset="utf-8" type="text/javascript">var browseDefaultColumn = 4; var browse5ColumnLength= '15,24'; var browse4ColumnLength = '20,28'; var browse3ColumnLength = '25,42';var priceFilterSliderEnabled = true;var browseLowPageLength = 24;var browseHighPageLength = 100;</script>
<script id="products-template" type="text/template">
    {{#products}}
        <li class="{{RowCssClass}}" style="{{RowStyle}}" li-productid="{{ItemCode}}">
            <div class="s-productthumbbox">
                <div class="productimage s-productthumbimage col-xs-6 col-sm-12 col-md-12">
                    <a href="{{PrdUrl}}" class="s-product-sache">{{#ImgSashVisible}}
                            <img src="{{ImgSashUrl}}" class="rtSashImg img-responsive">
                        {{/ImgSashVisible}}
                    </a>
                    <a href="{{PrdUrl}}" class="ProductImageList">
                        <div>
                            <img class="rtimg img-responsive" src='{{MainImage}}' alt='{{Brand}} {{DisplayName}}' />
                        </div>
                        {{#EnableAltImages}}
                            <div class="AlternateImageContainerDiv">
                                <img class="rtimg ProductImageListAlternateImage img-responsive" src='{{AltImage}}' alt='{{Brand}} {{DisplayName}}' />
                            </div>
                        {{/EnableAltImages}}
                    </a>
                    <div class="QuickBuyAndWishListContainerDiv hidden-xs {{QuickBuyAndWishListCss}}">
                        {{#IsQuickBuyEnabled}}

I'm looking for a way how to get the whole code containing generated code so I can parse it for example using Beautiful Soup. Or other efficient way to get the data.


Javascript: Toggle div visibility in two steps


This question maybe stupid for many here. I have a bunch of divs and want to make them appear/disappear on click with special behaviour:

On-load state: all divs visible

  1. click: all divs disappear, except for the one that was selected when clicking

  2. to n-th click: toggle visibility for the div that was selected when clicking

What I've got so far:

                function toggle_visibility(id) {
            var e = document.getElementById(id);
            if(e.style.display == 'block')
              e.style.display = 'none';
            else
              e.style.display = 'block';
        }

                function toggle_class(id) {
            var thisElem = document.getElementById(id);
            var invisible = "invisible";
            var visible = "visible";
            var classes = thisElem.classList;
            if (classes == invisible) {
                thisElem.className = thisElem.className.replace(invisible, visible);
            }
            else {
                thisElem.className = thisElem.className.replace(visible, invisible);
            }
        }
<ul id='list'>
        <li id='1-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('1'); toggle_class('1-i');">Toggle DIV #1</a></li>
        <li id='2-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('2'); toggle_class('2-i');">Toggle DIV #2</a></li>
        <li id='3-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('3'); toggle_class('3-i');">Toggle DIV #3</a></li>
        <li id='4-i' class='visible'><a href='javascript:return false;' onclick="toggle_visibility('4'); toggle_class('4-i');">Toggle DIV #4</a></li>
</ul>


<div id='1' style='display: block;'><h3>DIV #1</h3></div>
<div id='2' style='display: block;'><h3>DIV #2</h3></div>
<div id='3' style='display: block;'><h3>DIV #3</h3></div>
<div id='4' style='display: block;'><h3>DIV #4</h3></div>

This code shows all divs on page-load, then toggles visibility for the selected div on click. So on first click only the selected div will disappear with all others staying still visible - the opposite of what I want. Though from second click on, this behaviour is the desired one.

I have found similar other threads (like this one), but their issues seem to add complexity I'd like to avoid.

Thanks a lot for your help!


Edit: Now I tried to update function toggle_class(id) { following Arun P Johny's example:

        var firstrun = true;

        function toggle_class(id) {
            var thisElem = document.getElementById(id);
            var invisible = "invisible";
            var visible = "visible";
            if (thisElem.className == 'invisible' && !firstrun) {
                thisElem.className = thisElem.className.replace(invisible, visible);
            } else {
                thisElem.className = thisElem.className.replace(visible, invisible);
            }
            if (firstrun) {
                var children = document.getElementsByClassName('visible');
                for (var i = 0; i < children.length; i++) {
                    if (children[i].id != id) {
                        children[i].className = thisElem.className.replace(visible, invisible);
                    }
                }
            }
            firstrun = false;
        }

The result is somewhat confusing: On first click, the selected element changes its class to invisible (which I do understand, since the script tries to replace the class visible with invisible for all elements). So this is not the behaviour I want, the clicked element is supposed to keep the class visible (until it is clicked again, since this is when the div disappears).

And the even more confusing part to me: Not all other elements change their class to invisible, but only every second element.

What did I do wrong?


Tabs and sidemenu in Ionic


I am trying to create a Ionic app with the sidemenu starter project. For one of my menu options I would like to have a tab view with two tabs. I've replaced the search.html content with the following code:

<ion-view title="Profile">
        <ion-tabs class="tabs-positive tabs-icon-top">

            <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                <h1>HELLO OPTION 1</h1>
            </ion-tab>

            <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                <h1>HELLO OPTION 2</h1>
            </ion-tab>

        </ion-tabs>
</ion-view>

But with this, the H1 gets overlapped by the menu header. In previous versions of Ionic, this could be fixed with the has-header option, but this has been removed and should be managed automatically. From what I've read I should put my content within a ion-content block, but when I do this with the ion-tabs tabs are not shown (they're actually shown below the header bar, I can see them if I pull down). For reference this is the code I used:

<ion-view title="Profile">
      <ion-content>
            <ion-tabs class="tabs-positive tabs-icon-top">

                <ion-tab title="Option1" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
                    <h1>HELLO OPTION 1</h1>
                </ion-tab>

                <ion-tab title="Option2" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
                    <h1>HELLO OPTION 2</h1>
                </ion-tab>

            </ion-tabs>
      </ion-content>
    </ion-view>

How can I fix this?


How to put multiple images of variable widths into one row and make it responsive?


I have 4 images showing up in a row as shown below. The images are of variable widths. The image list is randomly generated so I can't predict their widths. But I need to put all of them into one single row. Even in smaller devices it should be in one row. How can I do this?

<div class="relatedphotos">
  <a href="/photos/natural-wonders-of-world-26051931">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_26051931-img_05_l.jpg" alt="Thumb 26051931 img 05 l">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-35991100">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_35991100-wallhaven-65322.jpg" alt="Thumb 35991100 wallhaven 65322">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-84217069">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_84217069-20140929_170747.jpg" alt="Thumb 84217069 20140929 170747">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-18133515">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_18133515-wallhaven-141502.jpg" alt="Thumb 18133515 wallhaven 141502">
      <p>Natural Wonders of World</p>
    </div>
  </a>
</div>

Here's the CSS :

.relatedphotos {
    width: 100%;
    white-space: nowrap;
    display: table;
    .relatedphoto {
        max-width: 100%;
        background-color: #FFFFFF;
        padding: 5px;
        border: 1px solid #DDDDDD;
        margin-left: 2px;
        margin-right: 2px;
        -webkit-box-shadow: 0 7px 5px -7px #ADADAD;
        -moz-box-shadow: 0 7px 5px -7px #ADADAD;
        box-shadow: 0 7px 5px -7px #ADADAD;
        vertical-align: middle;
        display: table-cell;
        float: left;
        p {
            margin-top: 5px;
            margin-bottom: 0px;
            text-align: center;
            color: #808080;
            font-size: 12px;
        }
    }
}


Drawing to the background


I'm creating a website that lets the user draw to the background with a color he chooses. I also want to let the user to change the background color with a hex color picker tool.

The latter is easy but how can I let the user draw to the background? Is it possible to use canvas as the background?

Should I create the whole background entire of small divs which color I would change when the user is drawing?


How do I make my jQuery slides responsive?


I'm working on a website for personal practice, and I've integrated a jQuery slide show for some photographs. My problem is that I can't figure out how to make these slides responsive when increasing and decreasing the screen size. I've checked what feels like everything but can't find the problem. Here is the code:

<!DOCTYPE html>
<html>
        <head>
                <link rel="stylesheet" type="text/css" href="styles.css">
                <link href='http://ift.tt/1EChKIY' rel='stylesheet' type='text/css'>
                <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
                <meta charset="UTF-8"/>
                <link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
                
                   <style>
                    /* Prevents slides from flashing */
                    #slides {
                      display:none;
                    }
                  </style>
                
                <!-- jQuery -->
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript">   
        
                $(function(){
                
                        var slideWidth = 700;
                        var slideHeight = 393;
                        
                        if(window.innerWidth <= 400) {
                                
                                slideWidth = window.innerWidth;
                        }
                        
                          $("#slides").slidesjs({
                            play: {
                              active: true,
                                // [boolean] Generate the play and stop buttons.
                                // You cannot use your own buttons. Sorry.
                              effect: "fade",
                                // [string] Can be either "slide" or "fade".
                              interval: 3000,
                                // [number] Time spent on each slide in milliseconds.
                              auto: true,
                                // [boolean] Start playing the slideshow on load.
                              swap: true,
                                // [boolean] show/hide stop and play buttons
                              pauseOnHover: false,
                                // [boolean] pause a playing slideshow on hover
                              restartDelay: 2500
                                // [number] restart delay on inactive slideshow
                            },
                                width: slideWidth,
                                height: slideHeight
                          });
                          
                });
                
                </script>
                
                <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
                <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
                <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
                <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
                <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
                <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
                <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
                <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
                <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
                <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
                <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
                <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
                <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
                <link rel="manifest" href="/manifest.json">
                <meta name="msapplication-TileColor" content="#ffffff">
                <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
                <meta name="theme-color" content="#ffffff">
                <title>Viktor and Luise</title>
        </head>
        <body>

                
                <p class="HomeHeaderBig">Viktor & Luise</p>
                
                
                <!-- Menu -->
                
                <nav>
                        <ul>
                                <li><a href="#" id="dropdown-button">Produkte</a></li>
                        </ul>
                        <ul>
                                <li><a href="Home.html">Home</a></li>
                                <li><a href="Kontakt.html">Kontakt</a></li>
                                <li><a href="News.html">News</a></li>
                                <li><a href="About.html">Über uns</a></li>
                                <li><a href="Impressum.html">Impressum</a></li>
                        </ul>
                </nav>
                
                <!-- Images -->
                  <div id="slides">
                    <img src="Images/VL-10.jpg" alt="throughtherackjacket">
                    <img src="Images/VL-1.jpg" alt="storewindow">
                    <img src="Images/VL-3.jpg" alt="whitejacket">
                    <img src="Images/VL-4.jpg" alt="showcase1">
                    <img src="Images/VL-5.jpg" alt="showcase2">
                    <img src="Images/VL-6.jpg" alt="showcase3">
                    <img src="Images/VL-7.jpg" alt="lvshoes">
                    <img src="Images/VL-8.jpg" alt="polojacket">
                    <img src="Images/VL-9.jpg" alt="shirt">
                  </div>
                <script src="jquery.slides.js"></script>
                <script src="scripts.js"></script>
        </body>
  

</html>
img {
        position: relative;
        padding-top: 4%;
}

body {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: lighter;
}

.slides {
        display: block;
        max-width: 50%;
        max-height: 100%;
        position: relative;
        margin-left: 20%;
        margin-top: 2%
}

.slidesjs-container {
        overflow: hidden;
        margin: 0;
        width: 100%;
        background-color: red;

}
// Generated by CoffeeScript 1.6.1
(function() {

  (function($, window, document) {
    var Plugin, defaults, pluginName;
    pluginName = "slidesjs";
    defaults = {
      width: 1000,
      height: 900,
      start: 1,
      navigation: {
        active: true,
        effect: "slide"
      },
      pagination: {
        active: false,
        effect: "slide"
      },
      play: {
        active: false,
        effect: "slide",
        interval: 5000,
        auto: false,
        swap: true,
        pauseOnHover: false,
        restartDelay: 2500
      },
      effect: {
        slide: {
          speed: 500
        },
        fade: {
          speed: 300,
          crossfade: true
        }
      },
      callback: {
        loaded: function() {},
        start: function() {},
        complete: function() {}
      }
    };
    Plugin = (function() {

      function Plugin(element, options) {
        this.element = element;
        this.options = $.extend(true, {}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
      }

      return Plugin;

    })();
    Plugin.prototype.init = function() {
      var $element, nextButton, pagination, playButton, prevButton, stopButton,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "animating", false);
      $.data(this, "total", $element.children().not(".slidesjs-navigation", $element).length);
      $.data(this, "current", this.options.start - 1);
      $.data(this, "vendorPrefix", this._getVendorPrefix());
      if (typeof TouchEvent !== "undefined") {
        $.data(this, "touch", true);
        this.options.effect.slide.speed = this.options.effect.slide.speed / 2;
      }
      $element.css({
      });
      $element.slidesContainer = $element.children().not(".slidesjs-navigation", $element).wrapAll("<div class='slidesjs-container'>", $element).parent().css({
        overflow: "hidden",
        position: "relative"
      });
      $(".slidesjs-container", $element).wrapInner("<div class='slidesjs-control'>", $element).children();
      $(".slidesjs-control", $element).css({
        position: "relative",
        left: 0
      });
      $(".slidesjs-control", $element).children().addClass("slidesjs-slide").css({
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        zIndex: 0,
        display: "none",
        webkitBackfaceVisibility: "hidden"
      });
      $.each($(".slidesjs-control", $element).children(), function(i) {
        var $slide;
        $slide = $(this);
        return $slide.attr("slidesjs-index", i);
      });
      if (this.data.touch) {
        $(".slidesjs-control", $element).on("touchstart", function(e) {
          return _this._touchstart(e);
        });
        $(".slidesjs-control", $element).on("touchmove", function(e) {
          return _this._touchmove(e);
        });
        $(".slidesjs-control", $element).on("touchend", function(e) {
          return _this._touchend(e);
        });
      }
      $element.fadeIn(0);
      this.update();
      if (this.data.touch) {
        this._setuptouch();
      }
      $(".slidesjs-control", $element).children(":eq(" + this.data.current + ")").eq(0).fadeIn(0, function() {
        return $(this).css({
          zIndex: 10
        });
      });
      if (this.options.navigation.active) {
        prevButton = $("<a>", {
          "class": "slidesjs-previous slidesjs-navigation",
          href: "#",
          title: "Previous",
          text: "<"
        }).appendTo($element);
        nextButton = $("<a>", {
          "class": "slidesjs-next slidesjs-navigation",
          href: "#",
          title: "Next",
          text: ">"
        }).appendTo($element);
      }
      $(".slidesjs-next", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.next(_this.options.navigation.effect);
      });
      $(".slidesjs-previous", $element).click(function(e) {
        e.preventDefault();
        _this.stop(true);
        return _this.previous(_this.options.navigation.effect);
      });
      if (this.options.play.active) {
        playButton = $("<a>", {
          "class": "slidesjs-play slidesjs-navigation",
          href: "#",
          title: "Play",
          text: ""
        }).appendTo($element);
        stopButton = $("<a>", {
          "class": "slidesjs-stop slidesjs-navigation",
          href: "#",
          title: "Stop",
          text: ""
        }).appendTo($element);
        playButton.click(function(e) {
          e.preventDefault();
          return _this.play(true);
        });
        stopButton.click(function(e) {
          e.preventDefault();
          return _this.stop(true);
        });
        if (this.options.play.swap) {
          stopButton.css({
            display: "none"
          });
        }
      }
      if (this.options.pagination.active) {
        pagination = $("<ul>", {
          "class": "slidesjs-pagination"
        }).appendTo($element);
        $.each(new Array(this.data.total), function(i) {
          var paginationItem, paginationLink;
          paginationItem = $("<li>", {
            "class": "slidesjs-pagination-item"
          }).appendTo(pagination);
          paginationLink = $("<a>", {
            href: "#",
            "data-slidesjs-item": i,
            html: i + 1
          }).appendTo(paginationItem);
          return paginationLink.click(function(e) {
            e.preventDefault();
            _this.stop(true);
            return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1);
          });
        });
      }
      $(window).bind("resize", function() {
        return _this.update();
      });
      this._setActive();
      if (this.options.play.auto) {
        this.play();
      }
      return this.options.callback.loaded(this.options.start);
    };
    Plugin.prototype._setActive = function(number) {
      var $element, current;
      $element = $(this.element);
      this.data = $.data(this);
      current = number > -1 ? number : this.data.current;
      $(".active", $element).removeClass("active");
      return $(".slidesjs-pagination li:eq(" + current + ") a", $element).addClass("active");
    };
    Plugin.prototype.update = function() {
      var $element, height, width;
      $element = $(this.element);
      this.data = $.data(this);
      $(".slidesjs-control", $element).children(":not(:eq(" + this.data.current + "))").css({
        display: "none",
        left: 0,
        zIndex: 0
      });
      width = 1000;
      height = 900;
      this.options.width = width;
      this.options.height = height;
      return $(".slidesjs-control, .slidesjs-container", $element).css({
        width: width,
        height: height
      });
    };
    Plugin.prototype.next = function(effect) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "direction", "next");
      if (effect === void 0) {
        effect = this.options.navigation.effect;
      }
      if (effect === "fade") {
        return this._fade();
      } else {
        return this._slide();
      }
    };
    Plugin.prototype.previous = function(effect) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      $.data(this, "direction", "previous");
      if (effect === void 0) {
        effect = this.options.navigation.effect;
      }
      if (effect === "fade") {
        return this._fade();
      } else {
        return this._slide();
      }
    };
    Plugin.prototype.goto = function(number) {
      var $element, effect;
      $element = $(this.element);
      this.data = $.data(this);
      if (effect === void 0) {
        effect = this.options.pagination.effect;
      }
      if (number > this.data.total) {
        number = this.data.total;
      } else if (number < 1) {
        number = 1;
      }
      if (typeof number === "number") {
        if (effect === "fade") {
          return this._fade(number);
        } else {
          return this._slide(number);
        }
      } else if (typeof number === "string") {
        if (number === "first") {
          if (effect === "fade") {
            return this._fade(0);
          } else {
            return this._slide(0);
          }
        } else if (number === "last") {
          if (effect === "fade") {
            return this._fade(this.data.total);
          } else {
            return this._slide(this.data.total);
          }
        }
      }
    };
    Plugin.prototype._setuptouch = function() {
      var $element, next, previous, slidesControl;
      $element = $(this.element);
      this.data = $.data(this);
      slidesControl = $(".slidesjs-control", $element);
      next = this.data.current + 1;
      previous = this.data.current - 1;
      if (previous < 0) {
        previous = this.data.total - 1;
      }
      if (next > this.data.total - 1) {
        next = 0;
      }
      slidesControl.children(":eq(" + next + ")").css({
        display: "block",
        left: this.options.width
      });
      return slidesControl.children(":eq(" + previous + ")").css({
        display: "block",
        left: -this.options.width
      });
    };
    Plugin.prototype._touchstart = function(e) {
      var $element, touches;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      this._setuptouch();
      $.data(this, "touchtimer", Number(new Date()));
      $.data(this, "touchstartx", touches.pageX);
      $.data(this, "touchstarty", touches.pageY);
      return e.stopPropagation();
    };
    Plugin.prototype._touchend = function(e) {
      var $element, duration, prefix, slidesControl, timing, touches, transform,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      slidesControl = $(".slidesjs-control", $element);
      if (slidesControl.position().left > this.options.width * 0.5 || slidesControl.position().left > this.options.width * 0.1 && (Number(new Date()) - this.data.touchtimer < 250)) {
        $.data(this, "direction", "previous");
        this._slide();
      } else if (slidesControl.position().left < -(this.options.width * 0.5) || slidesControl.position().left < -(this.options.width * 0.1) && (Number(new Date()) - this.data.touchtimer < 250)) {
        $.data(this, "direction", "next");
        this._slide();
      } else {
        prefix = this.data.vendorPrefix;
        transform = prefix + "Transform";
        duration = prefix + "TransitionDuration";
        timing = prefix + "TransitionTimingFunction";
        slidesControl[0].style[transform] = "translateX(0px)";
        slidesControl[0].style[duration] = this.options.effect.slide.speed * 0.85 + "ms";
      }
      slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
        prefix = _this.data.vendorPrefix;
        transform = prefix + "Transform";
        duration = prefix + "TransitionDuration";
        timing = prefix + "TransitionTimingFunction";
        slidesControl[0].style[transform] = "";
        slidesControl[0].style[duration] = "";
        return slidesControl[0].style[timing] = "";
      });
      return e.stopPropagation();
    };
    Plugin.prototype._touchmove = function(e) {
      var $element, prefix, slidesControl, touches, transform;
      $element = $(this.element);
      this.data = $.data(this);
      touches = e.originalEvent.touches[0];
      prefix = this.data.vendorPrefix;
      slidesControl = $(".slidesjs-control", $element);
      transform = prefix + "Transform";
      $.data(this, "scrolling", Math.abs(touches.pageX - this.data.touchstartx) < Math.abs(touches.pageY - this.data.touchstarty));
      if (!this.data.animating && !this.data.scrolling) {
        e.preventDefault();
        this._setuptouch();
        slidesControl[0].style[transform] = "translateX(" + (touches.pageX - this.data.touchstartx) + "px)";
      }
      return e.stopPropagation();
    };
    Plugin.prototype.play = function(next) {
      var $element, currentSlide, slidesContainer,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.playInterval) {
        if (next) {
          currentSlide = this.data.current;
          this.data.direction = "next";
          if (this.options.play.effect === "fade") {
            this._fade();
          } else {
            this._slide();
          }
        }
        $.data(this, "playInterval", setInterval((function() {
          currentSlide = _this.data.current;
          _this.data.direction = "next";
          if (_this.options.play.effect === "fade") {
            return _this._fade();
          } else {
            return _this._slide();
          }
        }), this.options.play.interval));
        slidesContainer = $(".slidesjs-container", $element);
        if (this.options.play.pauseOnHover) {
          slidesContainer.unbind();
          slidesContainer.bind("mouseenter", function() {
            return _this.stop();
          });
          slidesContainer.bind("mouseleave", function() {
            if (_this.options.play.restartDelay) {
              return $.data(_this, "restartDelay", setTimeout((function() {
                return _this.play(true);
              }), _this.options.play.restartDelay));
            } else {
              return _this.play();
            }
          });
        }
        $.data(this, "playing", true);
        $(".slidesjs-play", $element).addClass("slidesjs-playing");
        if (this.options.play.swap) {
          $(".slidesjs-play", $element).hide();
          return $(".slidesjs-stop", $element).show();
        }
      }
    };
    Plugin.prototype.stop = function(clicked) {
      var $element;
      $element = $(this.element);
      this.data = $.data(this);
      clearInterval(this.data.playInterval);
      if (this.options.play.pauseOnHover && clicked) {
        $(".slidesjs-container", $element).unbind();
      }
      $.data(this, "playInterval", null);
      $.data(this, "playing", false);
      $(".slidesjs-play", $element).removeClass("slidesjs-playing");
      if (this.options.play.swap) {
        $(".slidesjs-stop", $element).hide();
        return $(".slidesjs-play", $element).show();
      }
    };
    Plugin.prototype._slide = function(number) {
      var $element, currentSlide, direction, duration, next, prefix, slidesControl, timing, transform, value,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.animating && number !== this.data.current + 1) {
        $.data(this, "animating", true);
        currentSlide = this.data.current;
        if (number > -1) {
          number = number - 1;
          value = number > currentSlide ? 1 : -1;
          direction = number > currentSlide ? -this.options.width : this.options.width;
          next = number;
        } else {
          value = this.data.direction === "next" ? 1 : -1;
          direction = this.data.direction === "next" ? -this.options.width : this.options.width;
          next = currentSlide + value;
        }
        if (next === -1) {
          next = this.data.total - 1;
        }
        if (next === this.data.total) {
          next = 0;
        }
        this._setActive(next);
        slidesControl = $(".slidesjs-control", $element);
        if (number > -1) {
          slidesControl.children(":not(:eq(" + currentSlide + "))").css({
            display: "none",
            left: 0,
            zIndex: 0
          });
        }
        slidesControl.children(":eq(" + next + ")").css({
          display: "block",
          left: value * this.options.width,
          zIndex: 10
        });
        this.options.callback.start(currentSlide + 1);
        if (this.data.vendorPrefix) {
          prefix = this.data.vendorPrefix;
          transform = prefix + "Transform";
          duration = prefix + "TransitionDuration";
          timing = prefix + "TransitionTimingFunction";
          slidesControl[0].style[transform] = "translateX(" + direction + "px)";
          slidesControl[0].style[duration] = this.options.effect.slide.speed + "ms";
          return slidesControl.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", function() {
            slidesControl[0].style[transform] = "";
            slidesControl[0].style[duration] = "";
            slidesControl.children(":eq(" + next + ")").css({
              left: 0
            });
            slidesControl.children(":eq(" + currentSlide + ")").css({
              display: "none",
              left: 0,
              zIndex: 0
            });
            $.data(_this, "current", next);
            $.data(_this, "animating", false);
            slidesControl.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");
            slidesControl.children(":not(:eq(" + next + "))").css({
              display: "none",
              left: 0,
              zIndex: 0
            });
            if (_this.data.touch) {
              _this._setuptouch();
            }
            return _this.options.callback.complete(next + 1);
          });
        } else {
          return slidesControl.stop().animate({
            left: direction
          }, this.options.effect.slide.speed, (function() {
            slidesControl.css({
              left: 0
            });
            slidesControl.children(":eq(" + next + ")").css({
              left: 0
            });
            return slidesControl.children(":eq(" + currentSlide + ")").css({
              display: "none",
              left: 0,
              zIndex: 0
            }, $.data(_this, "current", next), $.data(_this, "animating", false), _this.options.callback.complete(next + 1));
          }));
        }
      }
    };
    Plugin.prototype._fade = function(number) {
      var $element, currentSlide, next, slidesControl, value,
        _this = this;
      $element = $(this.element);
      this.data = $.data(this);
      if (!this.data.animating && number !== this.data.current + 1) {
        $.data(this, "animating", true);
        currentSlide = this.data.current;
        if (number) {
          number = number - 1;
          value = number > currentSlide ? 1 : -1;
          next = number;
        } else {
          value = this.data.direction === "next" ? 1 : -1;
          next = currentSlide + value;
        }
        if (next === -1) {
          next = this.data.total - 1;
        }
        if (next === this.data.total) {
          next = 0;
        }
        this._setActive(next);
        slidesControl = $(".slidesjs-control", $element);
        slidesControl.children(":eq(" + next + ")").css({
          display: "none",
          left: 0,
          zIndex: 10
        });
        this.options.callback.start(currentSlide + 1);
        if (this.options.effect.fade.crossfade) {
          slidesControl.children(":eq(" + this.data.current + ")").stop().fadeOut(this.options.effect.fade.speed);
          return slidesControl.children(":eq(" + next + ")").stop().fadeIn(this.options.effect.fade.speed, (function() {
            slidesControl.children(":eq(" + next + ")").css({
              zIndex: 0
            });
            $.data(_this, "animating", false);
            $.data(_this, "current", next);
            return _this.options.callback.complete(next + 1);
          }));
        } else {
          return slidesControl.children(":eq(" + currentSlide + ")").stop().fadeOut(this.options.effect.fade.speed, (function() {
            slidesControl.children(":eq(" + next + ")").stop().fadeIn(_this.options.effect.fade.speed, (function() {
              return slidesControl.children(":eq(" + next + ")").css({
                zIndex: 10
              });
            }));
            $.data(_this, "animating", false);
            $.data(_this, "current", next);
            return _this.options.callback.complete(next + 1);
          }));
        }
      }
    };
    Plugin.prototype._getVendorPrefix = function() {
      var body, i, style, transition, vendor;
      body = document.body || document.documentElement;
      style = body.style;
      transition = "transition";
      vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
      transition = transition.charAt(0).toUpperCase() + transition.substr(1);
      i = 0;
      while (i < vendor.length) {
        if (typeof style[vendor[i] + transition] === "string") {
          return vendor[i];
        }
        i++;
      }
      return false;
    };
    return $.fn[pluginName] = function(options) {
      return this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
          return $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
      });
    };
  })(jQuery, window, document);

}).call(this);