Does .wrap( ) cancel the wrappers style properties?

I have a button:

var button = ($('<button>', {
            "id": "jspsych-free-sort-done-btn",
            "class": "jspsych-free-sort",
            "html": "Done",
            ...
}));

that I want to center. Someone on stackoverflow suggested using .wrap() to add a wrapper div but this doesn't seem to be centering the button:

button.wrap("<div style='text-align:center'> </div>");

Does .wrap() cancel the wrapper's style properties? And if so how to I center my button? Thanks!

via Chebli Mohamed

Loading a stylesheet from JavaScript memory instead of using AJAX or

I am using a plugin for RequireJS which allows you to load CSS along with your JS onto the front-end.

Now, the problem is, that I don't know how to append a stylesheet to the document without using a link tag which uses AJAX to retrieve the stylesheet from the server.

define(['css!my_stylesheet_path',function(sss){

 //how do I apply the stylesheet 'sss' to the document?  <<<<

});

as you can see, in my RequireJS module, I have loaded a CSS file using the css plugin: http://ift.tt/MdYgk1

does anyone have any idea how to apply this stylesheet to the document directly? I assume if I use an href attribute it will go searching for the stylesheet on the server instead of using the one I already have in hand.

From this link*, it looks like I can do so like so:

var sheet = document.createElement('style')
sheet.innerHTML = "div {border: 2px solid black; background-color: blue;}";
document.body.appendChild(sheet);

Now that's some shit right there.

*http://ift.tt/1wpr4FO

via Chebli Mohamed

Is there any way to set table column width dynamically per column via CSS/LESS?

What I mean is, is that if there are 4 columns to a table, the column's width would be at maximum 25% of the table's width. If it was 3 columns, then 33%. Two columns, 50%. 10 columns? 10%. The maximum width for the table is predetermined at 500px (for the sake of this example) and will always stay, at maximum, 500px. LESS is being used.

via Chebli Mohamed

Images disappear when on certain mobile devices

So I've recently completed my website and have seen that the two images on my home don't show up on certain mobile devices. I'm not to sure why. In any case here the code is below. You can also see the live view of my website here. Just to reiterate it works fine on desktop, however on certain mobile devices the images simply disappear, or seem to be hiding behind the get in touch section. I thank you in advance for any help.

 .My-Gems {
     width: 100%;
 }


@media screen and (max-width:444px) {  
 .My-Gems {
     width: 100%;
     margin-top:-370px;
    }}

    @media screen and (max-width:333px) {  
 .My-Gems {
     width: 100%;
     margin-top:-380px;
    }}


  .Second-Header {
     display: block;
     margin-bottom: 5em;
     margin-top:4em;
     position: relative;
     color:#fff;
 }

 @media (max-width: 777px){
    .Second-Header {
     margin-bottom: 4em;
     margin-top:3em;
}
}


 @media (max-width: 666px){
    .Second-Header {
     margin-bottom: 3em;
     margin-top:2em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-bottom: 2em;
     margin-top:1em;
}
}

 @media (max-width: 555px){
    .Second-Header {
     margin-top:.5em;
}
}
  .Second-Header h2 {
     font-family:'Abril Fatface', cursive;
     font-size:2.5em;
     font-weight: 400;
     color:fff;
 }


@media (max-width: 777px){
    .Second-Header h2{
        font-size:2em;
}
}

@media (max-width: 666px){
    .Second-Header h2{
        font-size:1.8em;
}
}

@media (max-width: 555px){
    .Second-Header h2{
        font-size:1.5em;
}
}

@media (max-width: 444px){
    .Second-Header h2{
        font-size:1.3em;
}
}

@media (max-width: 333px){
    .Second-Header h2{
        font-size:1.2em;
}
}

@media (max-width: 222px){
    .Second-Header h2{
        font-size:1em;
}
}


 .item {
     text-align:center;
              -moz-transition: all 0.3s ease-out;

         -o-transition: all 0.3s ease-out;
         -webkit-transition: all 0.3s ease-out;
         transition: all 0.3s ease-out;
     float:left;
     position:relative;
 }
 .item {
     width: 50%;
     height: 100%;
 }
 .item-hover, .item-hover .mask, .item-img, .item-info {
     width: 100%;
     height: 100%;
 }
 .item-hover, .item-hover .mask {
     position:absolute;
     top:0;
     height:100%;
     left:0;
 }
 .item-type-double .item-hover {
     z-index:5;
     -webkit-transition: all 300ms ease-out;
     -moz-transition: all 300ms ease-out;
     -o-transition: all 300ms ease-out;
     transition: all 300ms ease-out;
     opacity:0;
     cursor:pointer;
     display:block;
     text-decoration:none;
     text-align:center;
 }
 .item-type-double .item-info {
     z-index:10;
     color:#ffffff;
     display:table;
     position:relative;
     z-index:5;
 }
 .item-type-double .item-info div.mycell {
     vertical-align:middle;
     height: 100%;
     display:table-cell;
 }
 .item-type-double .item-info .headline {
     font-size:2.4em;    
     font-family: 'Proxima Nova' sans-serif;
     text-transform: uppercase;
     width:90%;
     margin:0 auto;
 }
 @media (max-width: 888px) {
     .item-type-double .item-info .headline {
         font-size:1.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 666px) {
     .item-type-double .item-info .headline {
         font-size:1.4em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 444px) {
     .item-type-double .item-info .headline {
         font-size:1.3em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 @media (max-width: 390px) {
     .item-type-double .item-info .headline {
         font-size:0.8em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

  @media (max-width: 333px) {
     .item-type-double .item-info .headline {
         font-size:0.6em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }

   @media (max-width: 222px) {
     .item-type-double .item-info .headline {
         font-size:0.5em;
         text-transform: uppercase;
         width:90%;
         margin:0 auto;
     }
 }
 .item-type-double .item-info .date {
     font-size:20px;
     font-family:'Canter';
     text-transform: uppercase;
 }
@media (max-width:444px){
    .item-type-double .item-info .date {
     font-size:16px;
     text-transform: uppercase;
 } 
}

@media (max-width:333px){
    .item-type-double .item-info .date {
     font-size:10px;
     text-transform: uppercase;
 } 
}



 .item-type-double .item-hover .mask {
     background-color:#000;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
     /*filter: alpha(opacity=50);*/
     opacity:0.5;
     z-index:0;
 }
 .item-type-double .item-hover:hover .line {
     width:90%;
 }
 .item-type-double .item-hover:hover {
     opacity:1;
 }
 .item-img {
     width:100%;
     z-index:0;
 }
 .item-img img {
     width:100%;
     display:block
 }

<div class="My-Gems">
<div class="Second-Header"><h2></h2></div>
<div class="item item-type-double">
<div class="item-img">

<img src="http://ift.tt/1TyECA3" class="menukadeem" title="Money-Matters-Logo" alt="Money-Matters-Logo"/>
</div>
<a class="item-hover" href="designs.html">
<div class="item-info">
<div class="mycell">
<div class="line"></div>
<div class="headline">Designs</div>
<div class="line"></div>
</div>
</div>
<div class="mask"></div>
</a>
</div>
<div class="item item-type-double">
<div class="item-img">
<img src="http://ift.tt/1UGu8M6" alt="Metaphon-Fitness" title="Metaphon-Fitness" style="width:100%;"/>
</div>
<a class="item-hover" href="events.html">
<div class="item-info">
<div class="mycell">
<!--<div class="date">Events</div>-->
<div class="line"></div>
<div class="headline">Events</div>
<div class="line"></div>
</div></div>
<div class="mask"></div>
</a>
</div>
</div>

via Chebli Mohamed

Bootstrap site not being responsive on mobile

Update: I've changed over the % and made px values max-width but it's still not being responsive with images, nor is the mobile menu working.. (link to website)

I am working on a site using Bootstrap, and for some reason it is not being responsive. I have the viewport set to meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"

Bootstrap.css first, then the theme.css.

via Chebli Mohamed

How to keep adding items to a div until both divs have same height?

I have two divs which are side by side. Currently, I display n+2 items in left div and n items in right one. n varies based on category and is predetermined. My problem is sometimes individual items in left div have more height than usual. How can I keep adding items to the right div until both divs have about same height?

via Chebli Mohamed

Background-color change on hover event not working

I got a problem with the CSS hover-event. I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)

<div class="nav">
 <ul>
   <li> <a> Something </a>
      <ul>
        ....
      </ul>
   </li>
   ....
 </ul>
</div>

That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.

.nav ul li:hover { background: #BFBFBF; }  - not working
.nav ul li:hover > a { color:#FFFFFF; }    - working perfectly fine
.nav ul li:hover > ul { display:block; }   - working perfect as well
.nav ul {
  background: #404040;
  list-style:none;
  padding:0 20px;
  margin: 0;
  height: 30px;
  text-align:left;
  display:block;
}

I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working. I tried using background-color instead of background, without success. I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.

I am noob to css, maybe I'm missing some really simple detail.

Thanks in advance.

via Chebli Mohamed

Applying linked stylesheets to document dynamically - add all, or add/remove dynamically?

I am using RequireJS to load stylesheets in an SPA, and then applying the stylesheets dynamically to whatever view the user sees. I am pretty much a web newb and I don't know if it makes sense to dynamically both add and remove stylesheets depending on the view, or should I just add all stylesheets to the document when the application starts up?

I assume in some cases, stylesheets might overlap, i.e. applying different parameters to the same .classes, etc. So surely in some cases it makes sense to remove a stylesheet from the document and add another.

Since this is an SPA, it should be the same document object throughout the application lifecycle, so I can't depend on a page reload to remove stylesheets - I will have to add and remove them explicitly.

I hope this question makes sense.

via Chebli Mohamed

Is it possible to cache just a piece(background, navigational bar) of a website instead of a whole file?

I want to cache just a element because it is used on EVERY web page of mine. Here check this image out. It is explained here. http://ift.tt/1NeKIkf

via Chebli Mohamed

How do you have a background image (of container) fit the screen width-wide, but not get cut off height-wise?

Now I now that question sounded confusing so I'm going to try to explain it simply. I have an image I'd like to use in a jumbotron element on a html page. I'd like the image to take up ~95% of the page width wise while never cutting off the image. I'd also like to maintain the aspect ratio for the purpose of maximum image quality. The image is 3225x2656.

Thanks for your help! Appreciate it.

via Chebli Mohamed

Changing CSS variables via JS in Polymer

In my Polymer project i have a toolbar, which's color I want to change using JavaScript. Since Polymer uses the CSS variable --paper-toolbar-background internally for styling, I can't do something like style.color. I found a method named setProperty(), but it doesn't work for me. Has ayone already found a solution?

I would be very pleased if someone could come up with a solution for that, Aaron

via Chebli Mohamed

Combine two specific javascript functions into one function for desired effect?

How can I combine two specific javascript functions into one function for the desired effect? or if anyone has a different solution I am open to it.

Here is the JS/Jquery to make the page scroll to an href anchor url using jquery.easing.1.3.js

    $(function() {
           $('a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                event.preventDefault();
            });
        });

Here is an older JS to hide/show a series of divs only allowing one div to show at any given time.

function NavigateSpecs(thechosenspec) {
    var SPEC = document.getElementsByTagName("div");
    for(var x=0; x<SPEC.length; x++) {
        name = SPEC[x].getAttribute("name");
        if (name == 'SPEC-2') {
              if (SPEC[x].id == thechosenspec) {
                    if (SPEC[x].style.display == 'block') {
                          SPEC[x].style.display = 'none';
                    }
                    else {
                          SPEC[x].style.display = 'block';
                    }
              }else {
                    SPEC[x].style.display = 'none';
              }
        }
     }
    }

I need to combine these two functions so upon clicking a link the browser will scroll to the desired anchor like the first JS function and show the specific div while hiding any other div with the similar id structure.

via Chebli Mohamed

Multiple fullscreen sections with absolute positioned divs inside

I'm creating a website and I want each section to take up the full screen. I have:

 html, body {
height: 100%;
width: 100%;
margin: 0;
}

and each section has 100% height and width and relative position. Inside the second section, I want to create four divs that take up each corner. They share a class which has height and width 50% and absolute position. I tried to position them individually by selecting each id and giving them top:0 left:0, top:0 right: 0, and so on.

The problem is, the left and right positioning works, but when I try to position the top or bottom, the div will go to the top or bottom of the first section instead of the second. I think it might be an issue with having two 100% divs on top of each other, but I'm not sure. Would really appreciate any advice!

via Chebli Mohamed

How to show "blocked" icon when you hover over an element with the mouse

A few days ago I saw a 'block' icon when I put my mouse cursor over a link, indicating that I could not click. How can I do that? I do not know the correct term to search, maybe that's why I'm not finding it. Is it a plugin? An HTML5 feature?

Unfortunately I do not remember the site that I saw this on.

Thanks!

via Chebli Mohamed

SASS compiles Google Fonts CSS into the file, breaks protocol-relative link

When I use the following code in my .scss file

@import url('//fonts.googleapis.com/css?family=SomeFont:400,700,400italic');

the SASS parser I use (nodejs gulp-sass) happily downloads the file from said location and includes it as plain text in the compiled output.

Problem is, my site uses HTTPS, and when the file is requested by the compiler, it fetches the file using HTTP and as such the URLs in the returned response are also HTTP which results in loads of warnings filling up the console, while the fonts would not load.

Is there any way I could tell the compiler to leave that line alone?

via Chebli Mohamed

Trying to create a fixed div at top of page

I'm trying to create a page with a fixed div above the main div.

I'm not talking z-order, I want the main div to start after the fixed div.

You can see it at http://ift.tt/1PlSMPl

The backgrounds are; body;lime, fixed div; gray (opacity; .6, main div; white

The main div should be below the fixed div but instead it overlaps the fixed div.

I'm using CSS rules on the elements, instead of style list, to make the whole thing easier to look and change.

I should know this one but I just can't think of what is missing.

What do I need to change to fix this problem.

Below is the HTML

<!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" />
<title>Test page - fixed div should be above main div</title>
</head>

<body style="background-color: #00FFFF">
<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto;  
        background-color: #C0C0C0;">
        fixed div line 1<br />
        fixed div line 2<br />
        fixed div line 3<br />
</div>

<div style="color: #000000; max-width: 800px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; ">
                <p>This is the first paragraph of the main div</p>
                <p>second paragraph of main div</p>
                <p>third paragraph of main div</p>
                <p>fourth paragraph of main div</p>
                <span style="color: red; font-weight: bold;">
                        <p>This page should have the gray fixed div above the white div. I've 
                        made the fixed div partially opacity so that you can see the white div's 
                        text through it.</p>
                        <p>What do I need to change to fix this problem.</p>
                        <p>I'm using rules on the elements to make the whole thing easier to 
                        look and change.</p>
                </span>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis 
                odio dapibus, cursus quam nec, feugiat mauris. Nullam id faucibus 
                mauris, vitae lacinia metus. Mauris pharetra semper mollis. Praesent ac 
                turpis eu leo pretium tempus. Morbi porttitor metus nec dolor hendrerit, 
                sed euismod nunc iaculis. Morbi eu eleifend justo, ut facilisis arcu. 
                Proin pellentesque laoreet magna et pretium. Pellentesque mattis sapien 
                lorem, quis tincidunt purus luctus nec. Aliquam tincidunt ultricies dui 
                vel varius. </p>
                <p>Phasellus mauris ligula, elementum ac convallis id, tincidunt non 
                enim. Integer vehicula euismod dui vel elementum. Nunc porttitor massa 
                eget sodales hendrerit. Nulla dui erat, fringilla sit amet tempor ut, 
                viverra quis massa. Cras iaculis augue at orci tincidunt auctor. Nulla 
                faucibus nibh velit, id vehicula nibh aliquam non. Quisque auctor lectus 
                sit amet nibh accumsan sodales. Proin eget risus nisi. Pellentesque 
                convallis augue a varius imperdiet. Sed ornare nisi nec metus fringilla, 
                nec egestas tortor bibendum. Donec a lacinia massa. Nam consequat 
                pharetra enim, sagittis egestas est suscipit eu. Pellentesque feugiat 
                nibh semper neque imperdiet dapibus. Quisque in elit venenatis, cursus 
                dui blandit, aliquet arcu. </p>
                <p>Morbi porttitor dapibus elit nec volutpat. Etiam vehicula tortor ac 
                mauris mollis, a tristique elit tristique. Donec interdum dictum ornare. 
                Nam commodo augue ipsum, at vestibulum nulla porta eu. Donec sed congue 
                eros. Aenean tortor mauris, ornare vitae aliquam vitae, tristique a 
                quam. Vivamus finibus, quam sit amet aliquam tristique, tortor ligula 
                vehicula magna, vel suscipit est ex quis orci. Phasellus efficitur 
                hendrerit turpis vel vehicula. Aenean arcu sem, sagittis nec hendrerit 
                vitae, pellentesque consequat leo. Sed egestas euismod condimentum. Sed 
                commodo ornare quam vel vulputate. Sed ultricies dictum libero id 
                aliquam. Suspendisse vel odio justo. Duis lacinia interdum venenatis. 
                Mauris eget mauris tortor. </p>
        </div>    
</body>
</html>

=======================================

Have good answer, curtsey of Joshua K.

I'll define a class named no-js (can be any class name) which sets position of 'fixed' div to relative. That will put the "fixed" div above the main div - though not actually fixed in place. Then with JavaScript I set the div to position: fixed and set the margin-top of the main div to the height of the "fixed" plus a fudge factor of say 5 or 6 px.

That way if JavaScript is enabled, the "fixed" div will actually be fixed and the margin-top of the main div will move it down to show the entire div.

If JavaScript is not enabled, the "fixed" div will still be visible, and above the main div, but it will scroll with the page.

Can I mark an answer as best answer? If so, how?

Stop the presses;

I could just set the position of the "fixed" div to relative (in a CSS class or using stye= on the element) and use JavaScript to change it to fixed and set the margin-top of the main div accordingly. That, I think, removes the need for another class named no-js or such.

---

I have created another page incorporating the changes needed to accomplish the task. It is at http://ift.tt/1gF9vRJ

---

AH -NOT QUITE RIGHT YET

Yes, adding margin-top will position the main div below the fixed dvi but, and it a BIG but---

If scroll the page, the main div scrolls and a a and the margin scrolls also - so, if you page down or scroll down a "page" you will lose as many lines as there are in the fixed div.

What needs to be set is the top position of the main div, not the margin. I've tried a lot of things but I can't get it to move when I set style.top to anything.

There must be a way to set the main div's top to move it down below the fixed div -- I'll just keep trying -- UNLESS someone has an idea as to how to make top move the main div below the fixed div.

The div has to be moved, setting the top margin looks like the solutions until you scroll and the div moves upward, taking the top margin with it.

try, try again ........

via Chebli Mohamed

Should I use CSS scaling to accommodate a browser resize on my website?

I see some websites remain static when the browser is resized and some that scale to fit depending on the window size. My question is what's the best to use and how would I implement both a static style or one that would adapt to a browser window resize.

The only information I could find that made it clear was that using max-width: 100%; height: auto; scales certain objects to adapt to a browser window resize. The thing is, it only works for some things not all. Here is my site, as you can see it's a bit of a mess. I would like it all tidied up properly like this site that I believe is static. However if answers can show me a way to make it scalable as well that would be great. But I assume having it static is easier.

Also if it helps here is a fiddle of a page from my site.

via Chebli Mohamed

Add an "click outside of menu to close" jquary/javascript to a menu drop-up that has .toggle()

I would like to add the function to close the menu if i click outside the menu. And also keep the menu button working to close it too: http://ift.tt/1DNxM2R

$(document).ready(function () { $("li").click(function () { $('li > ul').not($(this).children("ul").toggle()).hide(); }); });

Also can you tell me if this is correct for mobile etc? I hope and think so, because it's using .click, right?

This is referring to this post, that I can't reply to the answer to ask there: How to change drop-down menu to drop-up menu

via Chebli Mohamed

How to center align which serves as menu?

I tried to wrap it in div, I tried bunch of different code, but I cannot make it. I will appreciate any help.

I don't know where am I making mistake.

.menu2 {
  list-style: none;
  justify-content: center;
  align-items: center;
}
.menu2 li {
  float: left;
  width: 80px;
  padding: 1px;
}
.menu2 > li a {
  display: block;
  font-size: 0.8em;
  padding: 3px;
  text-decoration: none;
  text-align: center;
  color: #333333;
  border: 1px solid #d6d6d6;
  transition: all ease .5s;
}
.menu2:hover > li a {
  opacity: .5;
  transition: all ease .5s;
}
.menu2 > li:hover a {
  opacity: 1;
  color: #D2383C;
  border-color: #D2383C;
}

<ul class="menu2">
<li><a href="">2014</a></li>
<li><a href="">2013</a></li>
<li><a href="">2012</a></li>
</ul>

via Chebli Mohamed

Flickity does not render the second image in the carousel

http://ift.tt/1PfihBD is a test of my website. I am attempting to add a flickity carousel, and for some reason it will not render the second image in the the divs. Here is the the carousel without all the the other html and css stuff. http://ift.tt/1N1Se1L

<div class="gallery js-flickity">
   <div class="gallery-cell">
      <img src="http://ift.tt/1N1Se1P" alt="art">
   </div>
   <div class="gallery-cell">
      <img src="http://ift.tt/1HAbDji" alt="stuff">
  </div>
  <div class="gallery-cell">
  </div>
  <div class="gallery-cell"></div>
  <div class="gallery-cell"></div>
</div>

CSS:

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery {
   padding: 50px 0px 0px 0px;

}

.gallery img {
  display: block;
  width: 100%;
  height:auto;
}

Heres proof the image links are good

Oh, and no jQuery.

via Chebli Mohamed

jQuery - Change CSS of one div that shares its class with other divs

I am trying to change the CSS of a single DIV that shares its class with other divs.

I have been trying looking around for a solution but nothing seems to work.

I am trying using the code below without results:

$(".singleOffer").click(function(){
    $(this).parent().find(".offerSocial").css({transform: "translateY(0%)", opacity: "1" });
});

HTML

<div id="pattern" class="pattern">
  <ul class="g">

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

<li class="singleOffer">
      <img class="offerImg" src="<?php echo $file ?>" alt="Product Name" />
      <div class="offerSocial">
          <a class="previewLink" target="_blank" href="<?php echo $file ?>" >DOWNLOAD</a>
          <label class="shareLabel">Share on</label>
          <div class="share-buttons">
              <button class="fbShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Facebook</button>
              <button class="twShare" type="button" onclick="window.open('<?php echo $file ?>', 'newwindow', 'width=500, height=500'); return false;">Twitter</button>
          </div>
      <div>
</li>

.....

  </ul>
</div>

via Chebli Mohamed

How to change window title on a new popup window with custom height and width

Hi below is my code using a onclick with target="popup", how do I change the title of the new popup?

<a href="#" target="popup" 
  onclick="window.open('http://ift.tt/1UGj41N','popup','width=220,height=220,scrollbars=no,resizable=no'); return false;">Open new window</a>

via Chebli Mohamed

Space appearing on firefox, but not chrome?

folks.

Today,I decided to install firefox and test my navigation bar out on firefox instead of google chrome. Firefox shows a random space ontop while chrome doesn't. Anyone know what the problem is and how to fix it?

This is what firefox looks like compare to chrome.(Sorry for the bad quality, I resized it bad.)

http://ift.tt/1UGj5mn

If it matters, this is the code i'm using:

<html>

<head>
<title>Blitz</title>

<style>
body{
margin: 0px;
padding:0px;
}

.Blitz{
background-color:#2DDEDE;
padding:0px;
margin:0px;
border-color:black;
}

.Navigationbar{
height:40px;
width:500px;
background:#a7e8ee;
border:none;
}


.Navigationbar li{
display:inline;

}


.Navigationbar a{
color:black;
text-decoration:none;
}
</style>

</head>

<body>


<div class="Blitz">
<h1><center>Blitz</center></h1>
<ul>
<div class="Navigationbar">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>

<div class="information">
<!--Information about the site here. Pictures to go with that-->

</div>

</body>

</html>

via Chebli Mohamed

Background image for media screen not displaying whole image

I'm trying to make my site responsive and I cannot get my pages background image that covers 85% of the screen to display the entire image. It just shows a very small portion of it. What am I doing wrong? If it helps, my site is sundayfundayleague.com .

I'm attempting to do this..

.indexgraypage {
    width: 100%;
    left: 0;
    right: 0;
    min-height: 100%;
}
.homeimg {
    background-image: url("/images/bright_lights_smallest.jpg");
    width: 80%;
    background-size: cover;
    background-position: center;
    height: 100%;
    margin: auto;
    position: absolute;
    margin-right: 10%;
    margin-left: 10%;
}

via Chebli Mohamed

Can't put an image inside a div properly

I'm working with Angular and trying to bind an image to a div background. The background need to be darker from the original image so text can be include later :

The problem Is - The image does not show properly inside the boundaries of the div; some parts of the image are missing.

.PictureCover {
  background-size: cover;
    margin: 10px;
  width: 70px;
  height: 100px;
  float: left;
  
}

<div class="PictureCover" style="background-image: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ),
    url(http://ift.tt/1Tzql0K);"></div>

The url to the image from the example is temporary and will be replaced with a binding to a image from object in angular so inculding 'background-image' inside the PictureCover css class is not an option.

Thanks.

via Chebli Mohamed

Javascript 'Window.open' causing hover at element which is not hoverred by mouse pointer at Google Chrome

I am doing an application which the user receive a list of items to choose, when the user moves the mouse a DIV:Hover class works backgrounding the color of the div, and when he clicks at one div to select it an ONCLICK function marks the clicked div and redirect to a website( _blank ), perfect, but when you go back to this page there is two div selected, the div user has clicked and another one , if the user moves the mouse, even if a little the second div backs to normal.

What i want is go back to page and only the div clicked is marked.

It only happens at Google Chrome

Jsfiddle ----> 

http://ift.tt/1WnA26Q

Print Screen --> 

http://ift.tt/1WnA52g

Is it possible to solve and do not marks a second DIV ?

If I do not redirect to a website, it work normally, but i need to redirect =(

via Chebli Mohamed

Interaction of pseudo-elements with :not pseudo-class

Short version:

Using Chrome, I noticed that the selector

#main-content p:first-of-type::first-letter:not(.subhead) { ... }

seems to fail to apply first-letter styles regardless of the class of the paragraph, but if I place the :not pseudo-class earlier, as in either of

#main-content p:first-of-type:not(.subhead)::first-letter { ... }
#main-content p:not(.subhead):first-of-type::first-letter { ... }

then it works as I would expect. Is this an issue in Chrome, or is there some aspect of CSS selectors which explains this, that I just don't understand?

(Additionally, if it's not just an issue in Chrome, can someone suggest a better title for this question?)

---

Long version:

The short version seems like a good self-contained question to lead with, but there's some more complicated background info which might have its own interesting ramifications. (And which might warrant its own separate question, or be another bug. Help very much appreciated???)

Originally I was trying to apply initial drop-caps to the first paragraph in a div and any subsequent paragraphs that immediately followed a horizontal rule, unless they were part of a subheading. Here's a highly-abbreviated mock of the page structure:

<div id="main-content">
<section class="panel">
  <header>
    <h1>Welcome Friend!</h1>
    <p class="subhead">This is a subheader! (0)</p>
  </header>
  <div class="customhr"></div> <!-- consciously NOT an hr tag -->
  <p>Here's a paragraph (1)</p>
  <hr>
  <p>First paragraph of a new content section (2)</p>
  <p>And another paragraph. (3)</p>
</section>
</div>

And the extremely-abbreviated CSS:

#main-content p:first-of-type::first-letter,
#main-content hr + p::first-letter {
  /* Drop-cap styles */
}
.subhead::before {
  /* Indent sub-headings with a cute fleuron */
  content: "\00a0\00a0\2767\00a0";
}

While testing in Firefox, this resulted in paragraphs (1) and (2) having drop-caps, which is what I desired. In Chrome however, the fleuron from the ::before rule for paragraph (0) also has the drop-cap styles applied. I'm fairly confident Firefox is in error here, as :first-letter should match text from the ::before pseudo-element if it is present, but instead the ::before causes :first-letter not to match anything.

In trying to fix it for Chrome, I added the :not pseudo-class to the end of the first selector (see the first CSS rule in the short version). In Firefox, ironically, this produces the desired effect just as before, but in Chrome, this now caused paragraph (1) to no longer have the drop-cap styles applied. That, I have no explanation for, but I determined it has nothing to do with the .subhead element; Chrome apparently just never applies the rule, and paragraphs following a horizontal rule are the only ones that get styled. But if I move the :not pseudo-class earlier in the rule, as in the two alternatives I gave in the short version, it once again works as expected.

I feel as though I somehow simultaneously stumbled onto two different bugs in Firefox and Chrome, but the use of pseudo-classes and pseudo-elements is slightly arcane to me and I'm not fully confident with them. So I'm curious a) whether there's anything in-spec that would explain this CSS behavior in either browser as being correct, and b) if not, whether these are already known bugs with consistent behavior that has been documented somewhere. [And c) if not, let me know whether you plan to report said bugs so that I don't accidentally file a duplicate.]

via Chebli Mohamed

display:none not working in popup

I am trying to display this popup on JSGCL website. It does display the popup but it neither displays the text of the popup nor close the popup on pressing close.

HTML:

<div id="popup">
    <div >
        <h1>JamaPunji</h1>
        <p><a href="http://ift.tt/1h8fFKW" target="_blank">Click here</a> to get details.</p>
       <a href="#" id="close_popup">Close</a>
</div>

CSS:

#popup{
    position: absolute;
    background: #004990;
    top: 45%;
    left: 45%;
    width: 300px;
    height: 200px;
    /* border: 1px solid #000; */
    border-radius: 5px;
    padding: 5px;
    color: #fff;
    z-index:9999;
} 
#close_popup {
    color:#FFF;
    position:absolute;
    right:0px;
    top:0px;
}
#popup h1,#popup p, #popup a{
    text-align:center;
    z-index:9999;
}
#popup a{
    color:#F47B20;
      z-index:9999;
}

JavaScript:

$(document).ready(function() 
 {    $("#popup").css("display", "block");
  });

  $("#close_popup").click(function(){
    $("#popup").css("display", "none");
  }); 

via Chebli Mohamed

bootstrap floating css/widget/parts

I am searching for the boot strap floating css/widget/parts samples.

I am googling around with some keyword like 'floating / fixed' but only found sticky footer and header or some simple panel samples.

What my 'floating' means , div stays on the same place of window regardress of scroll.

like airbnb cacher panel.

(sorry this screenshot is japanese)

via Chebli Mohamed

Extra space around nested divs with display:table

I have a list that I'm styling like a table, so that the contents are horizontally aligned. The first column contains labels, and the second contains groups of buttons using Bootstrap's btn-group-justified class - which is also using display: table, so it's effectively a nested table.

The problem is that there is extra space added above the contents of the first cell and below the contents of the second, shown here in blue:

Here is the HTML:

<ol class="table-list">
  <li>
    <div>
      <span>Row 1</span>
    </div>
    <div>
      <div class="btn-group btn-group-justified">
        <div class="btn-group">
          <button class="btn btn-default">Option A</button>
        </div>
        <div class="btn-group">
          <button class="btn btn-default">Option B</button>
        </div>
      </div>
    </div>
  </li>
</ol>

And the stylesheet:

ol.table-list {
  display: table;
  list-style: none;
  padding: 0;
  border-collapse: collapse;
}
ol.table-list > li {
  display: table-row;
}
ol.table-list > li > div {
  display: table-cell;
}
ol.table-list > li > div > span {
  display: inline-block;
  white-space: nowrap;
  background: white;
  padding: 6px 12px;
  line-height: 20px;
  margin: 0;
}

This happens in both Firefox and Chrome. When I inspect the cells and their contents, there is no relevant margin and no padding. How can I get rid of that space?

Demo in Plunker

via Chebli Mohamed

How do I reverse engineer an existing browser based application to create my own version?

I am using an existing browser based application that is being obsoleted by the company which owns it and will no longer be supported. I want to capture and copy as much of the functionality as possible before it goes away. How can I copy the basic funcionality of the html, php, etc. by accessing the source files and reverse engineering the site?

via Chebli Mohamed

How to Completely Remove Element Based on Screen Size

I have two forms that have to use the same IDs, etc. however, one is specifically for mobile viewing and the other for everything else. I am using media queries and display: none to show/hide each, but of course they are both technically still coded ON the page, which means neither of them work. So instead I am trying to think of a way to totally remove the element based on screen size. It has to be actually removed and not simply hidden.

I'm stuck and I need to get the site migrated by tonight. Any suggestions would be most appreciated!!!

via Chebli Mohamed

a tag :before element to produce hover effect over image and still be clickable?

So what I want to achieve is an image wrapped in a link. This link will have a psuedo element :before that produces a black overlay on hover. This image should remain clickable. However, no matter what I do the pseudo element won't position above the image.

<a href="http://google.com">
  <img src="http://ift.tt/1BE5xku">
</a>

a {
 position: relative;
}

a:before {
 position: absolute;
 z-index: 99999999;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 content: "";
 background-color: black;
}

img {
  display: block;
}

http://ift.tt/1Ty0qM9

via Chebli Mohamed

html,head and body tags are being deleted after processing Javascript. So how to avoid such deletion? [on hold]

With the help of the following code, I can add number of colspan according to number of td available within a table.The problem with is that, it is adding properly colgroup, but after processing, it is deleting some tags within that same page(html,head,body tags).

How can I avoid such deletion?

$(document).ready(function() {

    $('#btnApply').on('click', function() {

        var input = '<div>' + $('#input').text() + '</div>';
        var html = $('<div/>').html(input).contents();
        console.log(html.find('table'));
        var output = '';
        html.find('table').each(function() {

            var colCount = 0;
            $(this).find('tr:nth-child(1) td').each(function() { // Get the count of table columns

                if ($(this).attr('colspan')) { // if there is a <td colspan>
                    colCount += +$(this).attr('colspan');
                } else {
                    colCount++;
                }
                console.log($(this));
            });


            var colgroupList = '';
            for (i = 0; i < colCount; i++) { // Add a <colgroup></colgroup> for each <td>
                colgroupList += '<col width="50%"></col>';
                console.log(colgroupList);
            }
            console.log('<colgroup>' + colgroupList + '</colgroup>');

            $(this).find("tbody").prepend('<colgroup>' + colgroupList + '</colgroup>');

            output += '<table>' + $(this).html() + '</table>';

        });

        $('#output').html(output);
        $('#outputHTML').text(output);
        $('#outputArea').fadeIn(1000);

    });

});

So can anyone help me. You can view my fiddle.

via Chebli Mohamed

Microsoft Edge Image Scaling

How do i make an image scale with bicubic for MS Edge? Is there some CSS or similar that can change the behavour.

See this page: http://ift.tt/1Ty0trl

On the right there are two images that have textured background, you can see the weird artifacts quite clearly

Chrome on the Left, MS Edge on the Right. As you can see there is some weird moire effect from the resize being nearest neighbor or linear, not bicubic.

via Chebli Mohamed

Cancelling a CSS rule

Let's say we have the following CSS default rule X, declared in a WordPress child theme:

.btn { background: url("btn.jpg"); }

And this rule Y, declared in commercial parent WordPress theme:

.btn:hover { background: gray; }

Can I somehow tell the browser "ignore Y", so that nothing will happen when hovering the .btn element?

via Chebli Mohamed

different content of the site for mobile devices and PC with similar resolutions

I need to have the following elements on my site displayed at the frontpage at the very same place independenly from each other:

1 a slider for smartphones only with resolutions up to 992 px width ( already have it) 2 a slider for tablets only with resolutions up to 2048 px width ( need to add) 3 a slider for PCs only with resolutions starting from 1024 px width ( already have it)

As you can see from the requierements resolutions of PCs and tablets intersect so that as far as I understand it is impossible to use basic @media queries (and "handheld" is no longer functioning properly)

I have the following .js included in my site's header for different purposes, but I feel it can be helpful because it helps add css to devices with touchscreens and PCs separately.

<script>
document.documentElement.className += 
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

Does anyone know a proper way of having independent sliders for 3 categories without situations, when two of them are displayed at once?

The site adress: poiskdetei.ru.

Thank you!

via Chebli Mohamed

Current Menu Item styling in wordpress

I am working on a site here: http://ift.tt/1UG5ds2

I want the current menu item in the main nav to be white instead of gray. In this case, if you are on the home page the home link in the nav will be white.

Whatever I try it remains gray.

CSS:

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a {
    color: #ccc;
    text-transform: uppercase;
}

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li > a:hover, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li > a:hover {
    color: #ccc;
    text-transform: uppercase;
    text-decoration:underline;
}

.main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main div.menu > ul > li.current_page_item > a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-main ul.menu > li.current_page_item > a {
    color: #fff;
}

HTML:

                   <div class="standard-menu-container  menu-skin-main reveal-from-top">

                        <a href="#" class="menu-bar menu-skin-main hidden-md hidden-lg">
                            <span class="ham"></span>
                        </a>


                        <nav>
                              <ul class="menu" id="menu-main-nav-1">
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://ift.tt/1UG5ds2">Home</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://ift.tt/1h7TMLB">Our Work</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://ift.tt/1UG5ds6">Our Services</a></li>
                                      <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://ift.tt/1UG5fQK">Our Team</a></li>
                                       <!-- Other Nav links -->
                              </ul>
                        </nav>
                    </div>

via Chebli Mohamed

My img div is floating in the other div

I'm trying to get my bootstrap img-responsive to get to the bottom of the div, but it no matter what I do, it won't move. I've tried altering the img-resposive CSS file setting height:to 0and bottom:to 0 but it doesn't fix the problem. I'm new to this and probably missing something out, so please be tolerant.

<!--this is the bootstrap.css file -->

.img-responsive,
    .thumbnail > img,
    .thumbnail a > img,
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: 0;
    bottom: 0;
}

<!--and this is the html -->

<div class="col-md-9 hidden-sm">
    <img src="img/valencia.png" class="img-responsive animated fadeInRight" alt="mockup">
</div>

via Chebli Mohamed

Dropdown menu css - I can't work out how to apply padding to the bottom of ul parent link without affecting children

I've recently had a few issues with a dropdown menu that I've created. Since putting a display:block rule in the css of my children page styling, the majority of these issues have been fixed, however now I'm faced with a new problem - I can't add padding to the bottom of the main parent navigation links, i.e "work" "about" etc, without affecting the child links in the dropdown menu, causing the spacing to change erratically - ruining the layout.

I've got everything positioned the way I want it, but I need some padding on the bottom of the main links so that they 'meet' the dropdown menu and don't leave any empty space between the two. Otherwise, when I drag the cursor downwards, the dropdown menu disappears when the cursor moves across between the gap between them. As I mentioned, this issue did not exist before adding display:block, so I know that 20px of padding-bottom under the parent menu links will fix this issue. Can anyone help me do this without creating the aforementioned problems?

My URL: http://ift.tt/1TzfELH

My code:

HTML:

<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>

CSS:

/* header navigation menu */

.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding:0;
background-color:#ffffff;
list-style:none; 
}

.header nav ul li {
float:left;
margin-left:50px;
}

.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}

/*  dropdown menu */

.header nav ul ul { 
position:absolute; 
left: -999em; 
}

.header ul li:hover ul {
left:auto;
width: 180px;
height:auto;
}

.header ul li ul li {
margin-left:0px;
width:100%;
float:none;
}

.header ul li ul li a {
display: block;
background-color:#ffffff;
transition: .1s background-color;
margin:0px;
padding: 14px 0px 14px 10px;
font-size:11px;
}

.header ul li ul li:hover a {
background-color:#ededed; }

/* end dropdown menu */

/* end header navigation menu */

via Chebli Mohamed

Transform: Rotate background-color

I'm having problems with transform: rotate on one of my headers. I'm trying to make the entire top half of the page have slight slant, this includes the text and the background. When I rotate the div it creates white space instead of filling the rest of the content in with the background color. The effect I'm trying to achieve is having the area outlined in blue to be the same red color so it expands from the left side of the page to the right. Here is the screenshot:

This is my code:

<div class="container-fluid header">
  <div class="row bottom-align">
    <div class="col-lg-8">
      <h1>Title</h1>
      <h1>Second-Title</h1>
      <h1>Another Title</h1>
    </div>
    <div class="col-lg-4 text-right bottom-align-text">
      <ul class="list-inline">
        <li><i class="fa fa-facebook fa-outline"></i></li>
        <li><i class="fa fa-twitter fa-outline"></i></li>
        <li><i class="fa fa-instagram fa-outline"></i></li>
        <li><i class="fa fa-pinterest fa-outline"></i></li>
        <li><i class="fa fa-envelope fa-outline"></i></li>
      </ul>
    </div>
  </div>
</div>

.header {

  background-color: $red-primary;
  color: $white;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);

}

Any suggestions would be appreciated.

via Chebli Mohamed

Wanna Make search-bar responsive

I have wordpress blog and I need to add search-bar in headerI want to make my search-bar responsive how can i do that? see the code please

/*Expandable Search CSS*/

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-2 input#search{
  width: 1px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
   color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
 
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
  margin-bottom: -60px;
  float: right;
 
}

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}
 
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}
 
.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}
 
.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: -25px;
  margin-top: 17px;
  z-index: 1;
  color: #ffffff;
}

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}
 
.container-2:hover input#search{
width: 300px;
}
 
.container-2:hover .icon{
  color: #000000;
   
}

/*Expandable Search CSS End*/

<link href="http://ift.tt/1oKzmdw" rel="stylesheet">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
<form role="search" class="search-form" action="http://ift.tt/1vzc6T2" method="get">      
<input type="search" class="search-field" id="search"    placeholder="Search …"  name="s" title="Search for:">
</form>  
</div>

HTML Code I am using in Text widget . This is a wordpress website and

Thanks

via Chebli Mohamed

Stop images from shaking page on resizing

I have several images that are in a line that will resize on hover so that the user knows that the image is being selected. The problem is that when you move from one image to the next, all the rest of the images move downwards. Additionally, when moving quickly from one image to the next, the screen appears to shake. How can I fix this?

img{
  margin:10px;
}
img:hover{
  width:100px;
  height:100px;
}

<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />
<img src="http://ift.tt/1hAojBK" width="70" height="70" />

http://ift.tt/1L9EPm6

via Chebli Mohamed

CSS - Transparent PNG centered in a DIV with responsive background

I have a DIV with a responsive background. I'm trying to place a centered png "logo" over the DIV (or the background, if you prefer). That's what I have:

.divWithBG {
    background-image: url(...);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 45.45%; /* (h/w) x 100 */
    margin-bottom: 30px;
}
.divWithBG img{
    display: block;
    margin: 0 auto;
}

¿What I need to do to place the image inside the div? Centered both, vertically and horizontally.

Many thanks in advance.

via Chebli Mohamed

Is there a proper substitute for Django Compressor in the MEAN development world?

While working with django, I just write SCSS and put the scss files under

{% compress css %} 
files go here 
{% endcompress %} 

Is there a similar replacement for this? Right now, I'm using Compass which keeps track of all my SCSS files and creates CSS files upon any change. With Compass, I have to include my CSS files in the HTML. I was wondering if I can add SCSS files to the HTML and serve them as one compressed CSS file which can be cached by the client and invalidated upon change.

via Chebli Mohamed

Twitter Bootstarp - Styling does not display on mobile browsers

My website is located at http://www.elgami.com/

I'm using Twitter Bootstrap for my styling. Everything works fine on desktop, but my styling does not display on mobile browsers, except for when I hard-code it in, of course. What could be going wrong?

My header is displayed below:

My css files are located in the folder "css" in my public_html root directory.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hypercycle™ - Personalize Your World.</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/blog.css" rel="stylesheet">

  <link rel="stylesheet" type="text/css" href="http://ift.tt/1h80sJT">
  <link rel="stylesheet" type="text/css" href="http://ift.tt/1UG7cg1">

  <link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />

</head>

via Chebli Mohamed

strange image resize issue

cant get the top image to fit into the div. help what am i doing wrong. I've tried looking at other solutions on this site but none really answer the question. I have it set to 100% for each of the image sizes but they still wont lock into the divs theyre in. a little help would be great.

<body>
<div class="container">
<div class="header">
    <div class="navbar">
    <ul>
    <li>HOME</li>
    <li>GALLERY</li>
    <li>EVENTS</li>
    <li>SHOP</li>
    <li>ABOUT</li>
    </ul>
    </div>
</div>
<div class="eventbar">
    <div class="events">
        <article>
            <div class="image"><img class="icono" src="http://ift.tt/1kmOBHx">
            </div>
            <div class="text">
            <h1 style="margin-bottom:-20px;">Event 1</h1>
            <p>this is this is placeholder text websites are fun and i like to make them. although they are freakin </p>
            </div>
        </article>
    </div>

<div class="newimages">
    <h1 class="imgtext">This is a catchy tagline</h1>
    <div><img class="r-image"src="http://ift.tt/1prU5Ux">
    </div>
    <p>this image is about yada yada and it was featured on yada yada. and now i would like to formally present it to you the aeophex family</p>
</div>

//css//

@charset "utf-8";
/*sectionized*/
body{
    margin:0px;
    padding:0px;
    font-family:sans-serif}
.container{}

/*header*/
.header{
    background-color:#FFF;}
.aeologo{
    margin-bottom:-13px;
    margin-left:-8px;
    }
.navbar{
    margin-left:-50px;}
.navbar ul li{
    display:inline;
    padding-left:10px;}
/*header*/

/*events*/
.eventbar{
    padding-bottom: 12px;
    padding-top: 5px;
}
.events{
    background-color: #06F;
    padding-bottom: 19px;
    padding-top: 3px;
    }
.events article{
    padding:10px;
    display:inline;
    padding-bottom:5px;}
/*events*/

.newimages{}

/*elements*/
.r-image{
    padding:15px;
    min-width: 25%;
    max-width: 95%;
    width: 95%;
    }
.icono{
    float: left;
    padding: 2px inherit;
    padding-right: 10px;
    padding-left: 5px;
    max-width: 100%;
    min-width: 25%;

}

via Chebli Mohamed

CSS table's text-align overwriting specific cell's text-align?

I want my whole table to have "center" text-align, besides some specific cells to have "right" text-align. In my code, the one cell is being more specifically targeted by CSS, yet the more general assignment is overriding. Why is this and how do I fix it?

.data td {
    text-align: center;
}
.animal {
    text-align: right;
}

<table class="data">
    <tr>
        <th>Type of Animal</th>
        <th>Favorite Food</th>
    </tr>
    <tr>
        <td class="animal">Cat</td>
        <td>Mouse</td>
    </tr>
</table>

via Chebli Mohamed

Search box inaccessible in wordpress header

I am working on a site here: http://ift.tt/1UG5ds2

I actually want the search box to appear below the navigation menu but when I place it there I can't click in the box to perform a search.

I added the same search field outside of the header to test that it works and it does.

I can't figure out why the search in the header area doesn't work. I have tried adding a z-index to the search div but it didn't work.

CSS:

.search-main-nav {
    float:right;
    width: 200px;
    z-index:999;
}
.search-main-nav input{
    border:2px solid #333;
    color:#333;
}
.search-main-nav label {
    color:#333;
    margin-left: -25px
}
.clear {clear:both;}

HTML (the 2 search functions are at the bottom above and below the </header> code:

<div class="wrapper" id="main-wrapper">

        <header class="main-header menu-type-standard-menu">
    <div class="container">

        <div class="logo-and-menu-container">

            <div class="logo-column">
                <style>.logo-image { width: 78px; }</style><a href="http://ift.tt/1h7TNiG" class="header-logo logo-image">
    <img src="//www.estiponagroup.com/dev/wp-content/uploads/2015/08/eg-logo.png" width="78" height="62" alt="logo" />
</a>            </div>
            <div class="social-links">
                <a class="facebook" target="_blank" href="http://ift.tt/1UG5ds4"><i class="icon fa fa-facebook"></i></a>
            </div>

            <div class="menu-column">
                                <div class="standard-menu-container  menu-skin-main reveal-from-top">

                        <a class="menu-bar menu-skin-main hidden-md hidden-lg" href="#">
                            <span class="ham"></span>
                        </a>


                        <nav><ul id="menu-main-nav-1" class="menu"><li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-631 current_page_item menu-item-645"><a href="http://ift.tt/1UG5ds2">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://ift.tt/1h7TMLB">Our Work</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-647"><a href="http://ift.tt/1UG5ds6">Our Services</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-648"><a href="http://ift.tt/1UG5fQK">Our Team</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-649"><a href="http://ift.tt/1h7TMLF">Our Story</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-650"><a href="http://ift.tt/1UG5fQO">News</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-651"><a href="http://ift.tt/1UG5fQQ">Our Fans</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-652"><a href="http://ift.tt/1h7TN27">Contact Us</a></li>
</ul></nav>
                    </div>

            </div>
        </div>


                    <div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>
    </div>

</header>


<div class="search-main-nav clear">
                                <form action="http://ift.tt/1UG5ds2" class="search-form" method="get" role="search">
                    <input type="search" id="search_box" name="s" value="" placeholder="Search..." class="search-field">

                    <label for="search_mobile_inp">
                        <i class="fa fa-search"></i>
                    </label>

                    <!--<input type="submit" value="Go" class="search-submit">-->
                </form>
            </div>

via Chebli Mohamed

Wrap links found in content editable div on user keypress.

How would I go about wrapping text in a content editable div that is a URL right when the user enters it and without changing the position of the cursor? I had this same issue with handling #hashtags and @mentions, but I was able to get passed that by using At.js .

via Chebli Mohamed

iOnic app - use $http.delete to delete object from local JSON file

I'm trying to build my first hybrid-app, i'm trying this with iOnic but also to AngularJS. Both are totally new for me :)

But so far I'm pretty happy with the results I made because I can find a lot of stuff if I'm stuck, but now I'm lost.

I'm trying to delete a favorite object I have saved in a local JSON file by clicking the remove button that I have placed behind every favorite item.

HTML template where the favorite items are listed by ng-repeat:

<ion-view view-title="My Favorites">
<ion-content>
    <ion-list>
      <ion-item ng-repeat="favo in favos" class="row">
        <i class="col icon ion-{{favo.gender}}"></i>
        <a href="#/app/myFavos/{{favo.id}}" class="button-clear col col-80">
            {{favo.name}}
        </a>
        <a class="button button-icon icon ion-trash-b col" ng-click="removeFavo(favo.id)">
        </a>
      </ion-item>
    </ion-list>
</ion-content>

Controller.js file:

angular.module('starter.controllers', [])

.controller('FavoslistCtrl', function($scope,  myFavos) {

    myFavos.getFavos(function (data) {
        console.log(data);
        $scope.favos = data;
    });

    $scope.removeFavo = function(data) {

        myFavos.deleteFavo(favo);

    }

})

.controller('FavoCtrl', function($scope, $stateParams, myFavos) {

  $scope.favo = myFavos.getFavos($stateParams, favoId);

  myFavos.getFavo(function ($stateParams, favoId, data) {
    $scope.favo = data;
  })

});

Service.js file:

angular.module('starter.services', [])

.factory('myFavos', function($ionicLoading, $http) {


  // Might use a resource here that returns a JSON array
  return {

    getFavos: function(callback) {
      $ionicLoading.show();
      $http.get('data/favos.json').success(function (data) {
        console.log("http GET success my favorites");

        console.log("return myFavos", data);
        $ionicLoading.hide();
        return callback(data);

      }).error(function (err) {
        $scope.error = 'Could not load favorites';
      });
    },

    deleteFavo: function(favo) {
      $http.delete('data/favos/' + favos.id + '.json').success(function (data) {
        return callback(data);
      });
    },


    getFavo: function(favoId) {
      for (var i = 0; i < favos.length; i++) {
        if (favos[i].id === parseInt(favoId)) {
          return favos[i];
        }
      }
      return null;
    }
  }

});

favos.json:

[
    {
        "id":1,"name":"Adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":2,"name":"Eva","description": "Lorem Ipsum", "gender": "female"
    },
    {
        "id":3,"name":"alex","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":4,"name":"adam","description": "Lorem Ipsum", "gender": "male"
    },
    {
        "id":5,"name":"max","description": "Lorem Ipsum", "gender": "male"
    }
]

I have been trying it with the $http.delete function in the factory I made called 'myFavos' but I can't figure out how to delete the right object, with the right id.

If someone could help that would be awesome!

json_decode multidimensional from database

I have this json saved in my database in a column called 'price' with the type of 'text'.

{
  "desks": {
    "Dedicated Desk": "$400 mo"
  },
  "private offices": {
    "1 Person": "$550 mo",
    "2 Person": "$1100 mo",
    "3 Person": "$1600 mo",
    "4 Person": "$2100 mo",
    "6 Person": "$3300 mo"
  },
  "flexible membership": {
    "Starting at": "$45 mo",
    "Every Extra Day": "$50 Day"
  }
}

I then make a call from PHP to return my all the fields in my database and encode them as json.

$json = json_encode($response,JSON_PRETTY_PRINT);
echo $json;

$response is the response from the database. When I var_dump on $response I get

array(22) {
    [0]=>
      object(stdClass)#6 (38) {
        [...]

        ["price"]=>
        string(242) "{"desks":{"Dedicated Desk":"$400 mo"},"private offices":{"1 Person":"$550 mo","2 Person":"$1100 mo","3 Person":"$1600 mo","4 Person":"$2100 mo","6 Person":"$3300 mo"},"flexible membership":{"Starting at":"$45 mo","Every Extra Day":"$50 Day"}}"

        [...]
      }
    [...]
}

When I echo the result from json_encode i get

[
    {
        [...]

        "price": "{\"desks\":{\"Dedicated Desk\":\"$400 mo\"},\"private offices\":{\"1 Person\":\"$550 mo\",\"2 Person\":\"$1100 mo\",\"3 Person\":\"$1600 mo\",\"4 Person\":\"$2100 mo\",\"6 Person\":\"$3300 mo\"},\"flexible membership\":{\"Starting at\":\"$45 mo\",\"Every Extra Day\":\"$50 Day\"}}",

        [...]
    },
    [...]
]

My problem is json_encode is taking the json from the database and formatting it as a string. I am trying to get it to format it as part of a multidimensional json structure. This is what im trying to achieve:

[  
   {  
      "price":[  
         {  
            "desks":{  
               "Dedicated Desk":"$400 mo"
            },
            "private offices":{  
               "1 Person":"$550 mo",
               "2 Person":"$1100 mo",
               "3 Person":"$1600 mo",
               "4 Person":"$2100 mo",
               "6 Person":"$3300 mo"
            },
            "flexible membership":{  
               "Starting at":"$45 mo",
               "Every Extra Day":"$50 Day"
            }
         }
      ]
   }
]

Any help would be appreciated. Running latest version of php.

Unexpected behavior of Json

I am trying to create a Json, in which a question have value, option and also it contain multiple questions. and these sub questions can also contain multiple sub questions.

here is my Json string

   {
  "Questions": {
    "question": {
      "Value": " Quest 1",
      "Option": " Quest 1 Option",
      "question": {
        "Value": " Quest 2",
        "Option": " Quest 2 Option"
      },
      "question": {
        "Value": " Quest 3",
        "Option": " Quest 3 Option",
        "question": {
          "Value": " Quest 4",
          "Option": " Quest 4 Option",
          "question": {
            "Value": " Quest 5",
            "Option": " Quest 5 Option"
          },
          "question": {
            "Value": " Quest 6",
            "Option": " Quest 6 Option"
          }
        }
      }
    }
  }
}

But when I'm trying to see it in Json Viewer,ques 2 and ques 5 is missing. what I'm doing wrong here ?

Clob & JSON parsing vs dedicated table for the nodes in JSON

We are currently evaluating various data layer designs for a project.

We have JSON data (not more than few megs & less than 500 nodes all inclusive) coming in from various sources. We have finalized on 2 approaches. Also we expect not more than 500 concurrent requests.

1. Store the JSON as CLOB in DB, and python json module to parse and extract required fields used by the web application.
2. Design table for the JSON nodes and store it in a dedicated oracle table and retrieve for use with the web application

Need any 3rd degree view/suggestions, before our POC and performance testing.

Thanks for your help. I know the question has broader scope but I think it is specific enough to be considered here.

UPDATE:

1. We use Oracle 11g
2. Requirement is not for reporting but for displaying content on the Web app
3. The web app is expected to be have 10k-30k requests /day, and we would be parsing JSON for every request. So that's 10k-30k times/day.
   4. This is just one part of the bigger web app.

What we are trying to establish is, is it worth having 500 odd columns (many tables) vs JSON parsing which can be handled with Python dicts which are faster anyway.

Convert to time in Golang from milliseconds

I have a some json data where there is a field called lastModifed contains time in millis. I wanted to convert this data into a struct type with json.UnMarshaller. I have mapped the field with json filed. But the conversion seems not working.

IE :

My Json looks like this:

{
   "name" : "hello",
   "lastModified" : 1438167001716
}

and struct Looks like

type Model struct {
    Name         string    `json:"name"`
    Lastmodified time.Time `json:"lastModified"`
}

looks not converting the time properly. how can i get the time from those millis??

NB: The millis of lastModifiedTime are getting from java System.currentTimeMillis();

converting josn data into angular js gantt chart data form

I am working on angular gantt chart and have some problem getting data from json to gantt data as they are in diffrent format

my json code is { "customers" : [ { "name" : "Doremon", "Tdate" : "2014-02-15T00:00:00", "Country" : "USA", "gender" : "M", "age" : 32, "tyear" : 2014, "ContactString" : 2 }, { "name" : "Dora", "Tdate" : "2014-02-05T00:00:00", "Country" : "FRA", "gender" : "F", "age" : 26, "tyear" : 2014, "ContactString" : 2 }, { "name" : "Popeye", "Tdate" : "2014-05-11T00:00:00", "Country" : "IND", "gender" : "M", "age" : 32, "tyear" : 2014, "ContactString" : 5 }, { "name" : "Minnie", "Tdate" : "2014-06-27T00:00:00", "Country" : "UK", "gender" : "F", "age" : 25, "tyear" : 2014, "ContactString" : 6 }, { "name" : "July", "Tdate" : "2014-09-16T00:00:00", "Country" : "PR", "gender" : "F", "age" : 25, "tyear" : 2014, "ContactString" : 9 } ] } and this should be converted into gantt chart data formatlike this example

{name: 'Status meetings', tasks: [ {name: 'Demo #1', color: '#9FC5F8', from: new Date(2013, 9, 25, 15, 0, 0), to: new Date(2013, 9, 25, 18, 30, 0)}, {name: 'Demo #2', color: '#9FC5F8', from: new Date(2013, 10, 1, 15, 0, 0), to: new Date(2013, 10, 1, 18, 0, 0)}, {name: 'Demo #3', color: '#9FC5F8', from: new Date(2013, 10, 8, 15, 0, 0), to: new Date(2013, 10, 8, 18, 0, 0)}, {name: 'Demo #4', color: '#9FC5F8', from: new Date(2013, 10, 15, 15, 0, 0), to: new Date(2013, 10, 15, 18, 0, 0)}, {name: 'Demo #5', color: '#9FC5F8', from: new Date(2013, 10, 24, 9, 0, 0), to: new Date(2013, 10, 24, 10, 0, 0)} ]},

so please if someone could tell some software or some technique for this conversion it would be very helpful

How do you create a responsive tabular feed that displays the result of an API in a tab?

I have a URL that returns JSON data. I want to create a table that displays the results from each API in a responsive tabbed panel and I am not sure how to start.

Here is a sample API URL http://ift.tt/1IAdlX0

Newbie coder here teaching myself to code.

Add a texture in ressource pack to a json model

I am using Windows 7 and BDCraft Cubik PRO.

In Minecraft 1.8, we can set a model to an item. I export my work to a .json file and all the textures I applied on it can't be found.

I don't know where or how can I put these textures on this .json file.

Inserting JSON subdocuments into Informix tables

I've set up an Informix 12.10 Innovater-C (free version) database. I've connected a Meteor/Mongo app remotely to it using the Informix mongo wire listener.

I've created a table with the following structure:

hashtags MULTISET(VARCHAR(255) not NULL),
fullcomment VARCHAR(255),
url ROW(hostname VARCHAR(255), link VARCHAR(100))

I can insert rows using sql (e.g. using dbaccess), and they show up in meteor perfectly, with the hashtags being an array of strings, and url being an object. An example object returned would be:

{   hashtags: [ 'xyz', 'abc' ],
    fullcomment: 'this is comment',
    url: { hostname: 'www.google.com', link: 'link' }
} 

However, in Meteor, I can't insert rows using the usual collection.insert() syntax. As long as I'm inserting a field containing only simple datatypes (i.e. no sets and no rows) then it works. For example, in the above defined table, I can do collection.insert({fullcomment: "comment"}) which will work and leave the other fields null.

When I try to insert a document with a url object with the following statement:

clips.insert({
   fullcomment: "this is comment",
   url: {hostname: "www.google.com", link: "xyz"}
});

I get the following error:

MongoError: Unable to insert into table testclip3: -9634 No cast from bson to ROW(hostname varchar(255), link varchar(100)). | No cast from bson to ROW(hostname varchar(255), link varchar(100)). (SQL Code: -9634, SQL State: IX000)

Similarly, if I try to insert a hashtags field containing an array, I get:

MongoError: Unable to insert into table testclip2: -9634 No cast from bson to MULTISET(char(255) not null). | No cast from bson to MULTISET(char(255) not null). (SQL Code: -9634, SQL State: IX000)

Am I doing something wrong with my table setups? Or is there a way I can specify the appropriate cast on the server side? I'm trying to keep the Meteor/Mongo side untouched if possible so I can transition an application over from Mongo to Informix.

The alternatives I see would be:

1. Use a BSON column in Informix to store the JSON documents natively. This works, but I'd really like to use native columns so that I can set up parent/child relationships, etc. like normal relational tables. This is mitigated by the fact that Informix allows you to construct views from JSON fields, but it seems that it'd be easier to try to keep a normal table structure as much as possible
2. Use SQL on the Meteor side to insert documents. This would be a real pain, as it would involve manually unwinding and translating objects into the appropriate fields, which I'm hoping to avoid.

Anyway, thanks for any insights or suggestions you might have.

loading json data from local file into React JS

I have a React component and I want to load in my JSON data from a file. The console log currently doesn't work, even though I'm creating the variable data as a global

'use strict';

var React = require('react/addons');

// load in JSON data from file
var data;

var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.open("get", "data.json", true);
oReq.send();

function reqListener(e) {
    data = JSON.parse(this.responseText);
}
console.log(data);

// create component
var Accordion = React.createClass({      
  render: function(){
    return (
      <div>
          Accordion component          
      </div>
    );
  }
});

module.exports = Accordion;

Ideally, I would prefer to do it something like this, but it's not working - it tries to add ".js" onto the end of the filename.

var data = require('./data.json');

Any advice on the best way, preferably the "React" way, would be much appreciated!

ajax post data undefined

I'm using xampp-control to emulate a local server. I have a html file and i'm trying with ajax to post some data into a json file. I can get the data from the json, but when I'm trying to post doesn't work.

here is the html

<!doctype html>
<html class="no-js" lang="">
    <head>
        <script src="http://ift.tt/1LdO4RA"></script>
        <script src="js/main.js"></script>
    </head>

    <body>
        <h1> Family Perez</h1>
        <form>
            <label>Name</label><input type="input" id="name" name="name"></input>
            <label>Last Name</label><input type="input" id="lastName" name="lastName"></input>
            <input type="submit" id="submitBtn" value="Add family Member" name="submit"></input>

        </form>

        <div></div>
    </body>
</html>

and here is the js

$(function(){

  $('#submitBtn').click(function(e){
    e.preventDefault();
    var firtsName = $('#name').val();
    var lastName = $('#lastName').val();

    $.ajax({
      type: 'post',
      url:'http://localhost/angel/Jquery_advanced/ajax/family.json',
      dataType: 'json',
      async: false,
      data: {name: firtsName, last: lastName},
      success: function(newMember){
          alert(newMember.name + ' ' + newMember.last + ' ' + 'has benn added');
      },
      error: function (jqXHR, textStatus, errorThrown){
        console.log(jqXHR);
        console.log(textStatus);
        console.log(textStatus);
      }
    })

  });

  $.ajax({
    type: 'GET',
    dataType: 'json',
    url: 'http://localhost/angel/Jquery_advanced/ajax/family.json',
    success: function(data) {
      $.each(data, function(i, member){
        $('div').append('<p>'+ member.name + ' ' + member.last +'</p>');
      })
    }
  });
});

the file http://localhost/angel/Jquery_advanced/ajax/family.json has:

[{"name":"Juliseth","last":"Hernandez"},{"name":"Angel","last":"Perez"}]

How to Append multiple objects in to Nested JSON?

Aim:- To create Restaurant Business Hours for all days.

Steps I followed :-

1). Used Post method from service ($http.Post)

2). Binded UI Elements with ng-model. (

3). Used Post Method for every Tab

Output :- Seven Different Objects instead of Nested Json Object .

Could Any one Guys Give me some Ideas Or Sample Code for appending all the small Jsons in to Nested Json Like Following .

Plunker http://ift.tt/1IA9Zn1

Outputs:-

Actual Ouput Needed.

{
 displayName:"My Restaurnat BusinessHours"
    sun:{
         Opened:true,
         open:"10:00 Am",
         close:"10:00 PM"
          },
    mon:{
         Opened:true,
         open:"10:00 Am",
         close:"10:00 PM"
          },
    tue:{
         Opened:true,
         open:"10:00 Am",
         close:"10:00 PM"
          }

    }

Wrong Out Put :-

{
    displayName:"My Restaurnat BusinessHours"
sun:{
     Opened:true,
     open:"10:00 Am",
     close:"10:00 PM"
      } 
 }


 {
    displayName:"My Restaurnat BusinessHours"
mon:{
     Opened:true,
     open:"10:00 Am",
     close:"10:00 PM"
      } 
 }

 {
    displayName:"My Restaurnat BusinessHours"
tue:{
     Opened:true,
     open:"10:00 Am",
     close:"10:00 PM"
      } 
 }

JSON return value to global variable

Simply my code looks like this:

 var thevariable = 0;

For(){
//somecode using thevariable
$.getJSON('',{},function(e){
//success and i want to set the returned value from php to my variable to use it in the forloop

thevariable = e.result;
});
}

my main problem that the variable value stays "0", during the whole For loop, while i only want it to be "0" at the first loop, then it takes the result returned from PHP to use it on for loop.

here it my real code if you need to take a look:

var orderinvoice = 0;
for(var i=0; i<table.rows.length; i++){
                            var ordername = table.rows[i].cells[5].innerText;
                            var orderqty = ((table.rows[i].cells[1].innerText).replace(/\,/g,'')).replace(/Qty /g,'');
                            var orderprice = (table.rows[i].cells[2].innerText).replace(/\$/g,'');
                            var ordertype = table.rows[i].cells[3].innerText;
                            var orderlink = table.rows[i].cells[4].innerText;

      $.getJSON('orderprocess.php', {'invoice': orderinvoice, 'pay_email': email, 'ord_name': ordername, 'ord_qty': orderqty, 'ord_price': orderprice, 'ord_type': ordertype, 'ord_link': orderlink}, function(e) {
          console.log();
          document.getElementById("result").innerText= document.getElementById("result").innerText + "Order #"+e.result+" Created Successfully ";
         document.getElementById("invoker").innerText = ""+e.invoice;
         orderinvoice = e.invoice;

          if(i+1 == table.rows.length){
            document.getElementById("result").innerText= document.getElementById("result").innerText + "With invoice #" + e.invoice;
          }
 });

Logstash: Parse Complicated Multiline JSON from log file into ElasticSearch

Let me first say that I have gone through as many examples on here as I could that still do not work. I am not sure if it's because of the complicated nature of the JSON in the log file or not.

I am looking to take the example log entry, have Logstash read it in, and send the JSON as JSON to ElasticSearch.

Here is what the (shortened) example looks:

[0m[0m16:02:08,685 INFO  [org.jboss.as.server] (ServerService Thread Pool -- 28) JBAS018559: {
"appName": "SomeApp",
"freeMemReqStartBytes": 544577648,
"freeMemReqEndBytes": 513355408,
"totalMem": 839385088,
"maxMem": 1864368128,
"anonymousUser": false,
"sessionId": "zz90g0dFQkACVao4ZZL34uAb",
"swAction": {
    "clock": 0,
    "clockStart": 1437766438950,
    "name": "General",
    "trackingMemory": false,
    "trackingMemoryGcFirst": true,
    "memLast": 0,
    "memOrig": 0
},
"remoteHost": "127.0.0.1",
"remoteAddr": "127.0.0.1",
"requestMethod": "GET",
"mapLocalObjectCount": {
    "FinanceEmployee": {
      "x": 1,
      "singleton": false
    },
    "QuoteProcessPolicyRef": {
      "x": 10,
      "singleton": false
    },
    "LocationRef": {
      "x": 2,
      "singleton": false
    }
},
"theSqlStats": {
    "lstStat": [
      {
        "sql": "select * FROM DUAL",
        "truncated": false,
        "truncatedSize": -1,
        "recordCount": 1,
        "foundInCache": false,
        "putInCache": false,
        "isUpdate": false,
        "sqlFrom": "DUAL",
        "usingPreparedStatement": true,
        "isLoad": false,
        "sw": {
          "clock": 104,
          "clockStart": 1437766438970,
          "name": "General",
          "trackingMemory": false,
          "trackingMemoryGcFirst": true,
          "memLast": 0,
          "memOrig": 0
        },
        "count": 0
      },
      {
        "sql": "select * FROM DUAL2",
        "truncated": false,
        "truncatedSize": -1,
        "recordCount": 0,
        "foundInCache": false,
        "putInCache": false,
        "isUpdate": false,
        "sqlFrom": "DUAL2",
        "usingPreparedStatement": true,
        "isLoad": false,
        "sw": {
          "clock": 93,
          "clockStart": 1437766439111,
          "name": "General",
          "trackingMemory": false,
          "trackingMemoryGcFirst": true,
          "memLast": 0,
          "memOrig": 0
        },
        "count": 0
      }
    ]
    }
}

The Logstash configs I have tried have not worked. The one closest so far is:

input {
    file {
        codec => multiline {
            pattern => '\{(.*)\}'
            negate => true
            what => previous
        }
        path => [ '/var/log/logstash.log' ]
        start_position => "beginning"
        sincedb_path => "/dev/null"
    }
}

filter {
    json {
        source => message
    }
}

output {
    stdout { codec => rubydebug }
    elasticsearch {
        cluster => "logstash"
        index => "logstashjson"
    }
}

I have also tried:

input {
    file {
        type => "json"
        path => "/var/log/logstash.log"
        codec => json #also tried json_lines
    }
}

filter {
    json {
        source => "message"
    }
}

output {
    stdout { codec => rubydebug }
    elasticsearch {
        cluster => "logstash"
        codec => "json" #also tried json_lines
        index => "logstashjson"
    }
}

I just want to take the JSON posted above and send it "as is" to ElasticSearch just as if I did a cURL PUT with that file. I appreciate any help, thank you!

UPDATE

After help from Leonid, here is the configuration I have right now:

input {
    file {
        codec => multiline {
            pattern => "^\["
            negate => true
            what => previous
        }
        path => [ '/var/log/logstash.log' ]
        start_position => "beginning"
        sincedb_path => "/dev/null"
    }
}

filter {
    grok {
        match => { "message" => "^(?<rubbish>.*?)(?<logged_json>{.*)" }
    }
    json {
        source => "logged_json"
        target => "parsed_json"
    }
}

output {
    stdout {
        codec => rubydebug
    }
    elasticsearch {
        cluster => "logstash"
        index => "logstashjson"
    }
}

Unexpected Identifier in Javascript for speech

I'm making a Visual Novel and I've come across an error in the code for the speech from the main character. Here is the code which I've tried using.

chapter1 = {
    label, "chapter1"
    text, {
        value: "Ughhhh",
        speaker: "Me",
        append: false,
        align: "left"
    },
];

Can I ask what I'm doing wrong or what I'm missing? And also, I've checked it out and it says that the unexpected identifier is the text, { part of the code

Looking for something in json file then trying something else if it doesnt work

Im getting json files from a site and i want it to find which ever one gets the file and use that one. Im using the $_GET Method too. There are 2 ways of getting the same file but they both require an id or a custom url from steam.

My url example: http://ift.tt/1DgKUNc

2 ways of getting json file:

• http://ift.tt/1KGINlV
• http://ift.tt/1DgM5wn

How im decoding it:

$id = $_GET['id'];
$url = "http://ift.tt/GFGALB".$id."/inventory/json/730/2";
$content = file_get_contents($url);
$playerinfo = json_decode($content, true);
$InventoryStatus = $playerinfo['success'];

Active class on links angular js with ng-click?

I have a menu with links that are loaded from a json file. I am wondering what is the best way to add an active class when the user clicks the link. I have seen examples with unordered lists, but none with actual links. I have tried it with ng-click on the anchor tag, but it doesnt work. Here is the code that I have so far. What do you suggest is the best way to implement this?

Menu.html

<ul ng-controller="menuList">
   <li ng-repeat="words in allTerms track by $index"  ng-class="{ 'active': $index == selectedIndex}"><a href  id="{{ $index }}" ng-click="testing($event); PracticeTerm(); itemClicked($index);">{{words.term}}</a></li>
</ul>

controller.js

$scope.selectedIndex = 0;

$scope.itemClicked = function($index) {
    console.log($index);
    $scope.selectedIndex = $scope.allTerms[$scope.shared[$scope.shared.length - 1]].term;
};

Best practices for updating local JSON data file in Swift app?

My app will ship with a local JSON file for the data, so that everything functions properly offline (because the region the app is based on is hit or miss on connections). I would like to be able to update the local file from time to time with an updated version that is hosted on a server.

Should I download the updated file and overwrite the local file with it, or is there a way to check to see if the file has been updated before downloading?

Also, what event would be best to do these type of tasks on? Downloading the file and overwriting the local copy every time the app runs seems like overkill, but I don't really know how I would go about checking the server file to see if the file is newer before downloading.

I'm new to programming in general, so I don't really know the best practices way to handle something like this.

Any help is appreciated.