#StackBounty: #javascript #php #jquery #html JS on change if checkbox is checked do function with php

Bounty: 50

JS on change if checkbox is checked do this function with php, how I can do this, is this possible or no?

 $('.avflipswitch').on("change", function (e){ 
        if(this.checked){
         functionOne(<?php $LinkOpen = '_blank';?>);
        }
        else{
         functionTwo(<?php $LinkOpen = '_self';?>);
        }
    });

cse

<gcse:searchresults-only linktarget="<?php echo $LinkOpen;?>"></gcse:searchresults-only>

Get this bounty!!!

December 30, 2018

#StackBounty: #html #mailchimp Mailchimp: unordered list with conditional merge tag blocks inside?

Bounty: 50

Trying to use conditional merge tags inside an unordered list, but my merge tags are getting automatically wrapped with a li.

What I expect:

<ul>
    <li>item 1</li>
    *|INTERESTED:Types:ES|*
    <li>item 2</li>
    *|END:INTERESTED|*
    <li>item 3</li>
</ul>

What I get:

<ul>
    <li>item 1</li>
    <li>*|INTERESTED:Types:ES|*</li>
    <li>item 2</li>
    <li>*|END:INTERESTED|*</li>
    <li>item 3</li>
</ul>

In the final HTML I get empty li items, which messes up my layout. Any way around this auto-wrapping?

Tried to wrap the merge tags with an *|IF|* as per this article, but getting same behaviour.

Get this bounty!!!

December 28, 2018

#StackBounty: #html #css #safari #webkit #typography Text is not positioned the same in Safari as in other browsers

Bounty: 100

The text is not positioned the same in Safari as it is in other browsers. Is there are reason for this? Is there a style to ensure it meets precise measurements.

div class=”snippet” data-lang=”js” data-hide=”false” data-console=”true” data-babel=”false”>

div class=”snippet-code”>

* {
        margin: 0;
        padding: 0;
    }
    #btn_signup {
        opacity: 1;
        position: absolute;
        width: 185px;
        height: 50px;
        left: 10px;
        top: 10px;
        overflow: visible;
    }
    #Rectangle_1 {
        opacity: 1;
        fill: transparent;
        stroke: rgb(67, 66, 93);
        stroke-width: 1px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Rectangle_1 {
        position: absolute;
        overflow: visible;
        width: 185px;
        height: 50px;
        left: 0px;
        top: 0px;
    }
    #Sign_up {
        opacity: 1;
        position: absolute;
        left: 58px;
        top: 16px;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        overflow: visible;
        width: 63px;
        white-space: nowrap;
        text-align: center;
    }
    #Path_1 {
        opacity: 1;
        fill: rgba(0,0,0,0);
        stroke: rgb(112, 112, 112);
        stroke-width: 0.5px;
        stroke-linejoin: miter;
        stroke-linecap: butt;
        stroke-miterlimit: 4;
        shape-rendering: auto;
    }
    .Path_1 {
        overflow: visible;
        position: absolute;
        top: 16.5px;
        left: 1px;
        width: 183.5px;
        height: 0.5px;
        transform: matrix(1,0,0,1,0,0);
    }

<body>

    
        
            
            
        
        
            Sign up
        
        <svg viewBox="12.5 0 183.5 0.5" class="Path_1">
            <path id="Path_1" d="M 12.5 0 L 196 0">
            </path>
        </svg>
    </div>
</div>
</body>

In Firefox the text is flush to the line. In Safari there is a few pixels gap as shown below:

How do I remove that gap?

Added a bounty. Ask questions if you need more clarity.

Get this bounty!!!

December 18, 2018

#StackBounty: #javascript #jquery #html #css A custom shape line between two container that change color like progress bar

Bounty: 50

Based on the image above, what I’m trying to achieve are:

Once the container reach middle of the viewport, it’s text background will change to yellow.
And also while user scroll down or up, the middle arrow will slowly fill in with yellow color until the user reach the middle viewport of the next container.

Now, I manage to make the focus container to change its text background to yellow and also I already display the progress bar shape but I’ve no idea how to make it change to yellow in relative on the user scroll action (like progress bar). Plus, the first progress bar need to start from right while the second one will start with left and vice versa for the next one.

P/S : I’m thinking of just using image, but then for sure making it to change to yellow like a progress bar is impossible.

div class=”snippet”>

div class=”snippet-code”>

$(document).ready(function() {
    var winHeight = $(window).height(),
        topLimit = winHeight * .2;

    $(window).on('scroll', function() {
        $('.parent').each(function() {
            var thisTop = $(this).offset().top - $(window).scrollTop();
            if (thisTop <= topLimit) {
                $(this).addClass('highlight');
            } else {
                $(this).removeClass('highlight');
            }
        });
    });
});

.parent {
  margin-top: 50px;
  height: 250px;
}

.img-col {
  width: 50%;
  height: 250px;
  background-color: green; 
  float:left;
}

.text-col {
  width: 50%;
  height: 250px;
  background-color: blue; 
  float: right;
}

.highlight .text-col {
  background-color: yellow;
}

.middle-line {
  height: 1px;
  width: 100%;
  position: relative;
  background: #000;
  margin-top: 50px;
}

.vertical-right {
  height: 20px;
  width: 1px;
  background: #000;
  position: absolute;
  right: 0;
  bottom: 0;
}

.vertical-left {
  height: 20px;
  width: 1px;
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
}

.vertical-right-bottom {
  height: 20px;
  width: 1px;
  background: #000;
  position: absolute;
  right: 0;
  top: 0;
}

.vertical-left-top {
  height: 20px;
  width: 1px;
  background: #000;
  position: absolute;
  left: 0;
  bottom: 0;
}

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
<html>
<body>

    
    Some text here
</div>


  
  
</div>


    Some text here
    
</div>


  
  
</div>


    
    Some text here
</div>


  
  
</div>


    Some text here
    
</div>


</body>
</html>

Get this bounty!!!

November 30, 2018

#StackBounty: #html #safari MP4 doesn't play after initial load in Safari

Bounty: 50

I have embedded a mp4 file in my webpage, that gets loaded fine and is playable by every browser and on mobile too.

<video controls src="/mymovie.mp4">
  <track kind="captions"></track>
</video>

However, when I open the webpage with Safari (macOS), the only thing I can see is a black box with the size of the video and a striked through (disabled) play button in front of it. The thing is, when I refresh the page again (even without clearing the cache) the video works fine.

When I write my markup to use the source element, the problem appears, but in a different way. Now I see no longer a black box, but a transparent one and I can press the play button, but the video won’t start. I already tried to place a “not supported” text under the source list, but the text doesn’t appear.

<video controls>
  <track kind="captions"></track>
  <source src="/mymovie.mp4" type="video/mp4"></source>
  not supported
</video>

Notice that I already tried reordering the source element above the track element.

Is there any known problem of this kind and a way to solve it?

Here are some more informations about my setup:

HTTPS only (valid certificate)
video size is around 3,5MB
NGINX is configured to send this headers:
- accept-ranges: bytes
- Content-Range: bytes 262144-3411398/3411399
- content-type: video/mp4

Something I notice in difference to Chrome is, that inside my devtools network tab the video source is loaded between 2 and 4 times, but just one time of it with the correct size. The other two entries are just some bytes. However, this happens in the same way, if I face the black box.

Get this bounty!!!

November 26, 2018

#StackBounty: #javascript #php #html #css #html5 Add css to format table into grid

Bounty: 50

So in my php file, the groups are listed from top-bottom. I want to list them from left-right, and then like start the next row, so they are all in a grid format displayed nicely across the page. How can i add html/css to do this?

Object.keys(cats).forEach(function(Group) {
      let html = '';

      // Append the 'category' header

      html = '<tr>';
      html += '<td><h1>'+"Group"+ Group+'</h1></td>';
      html += '</tr>';
      $('table').append(html);


      // Loop through the results for this 'category'
      cats[Group].forEach(function(element) {

        var names = element.names;

        var img = "<img src=' " + randomImage+ " ' />";

        html = '<tr>';
        html += '<td><p>' + names + '</p></td> ';

        html += '<td><p>' + img + '</p></td>';
        html += '</tr>';
        $('table').append(html);

      });

    });

    });

    </script>

    </body>

    <table> </table>

Get this bounty!!!

November 8, 2018

#StackBounty: #javascript #html #google-chrome-extension HTML input element does not recognize value when I put value programmatically

Bounty: 50

I have a Google Chrome extension that retrieves data from one site and paste the data in another site.

To get the data from the first site I use this code:

    $('#copy').click(function() {   
    var newClipboard = {
        "name": $('#buyercontactname').val(),
    }
    chrome.runtime.sendMessage({newClipboard: newClipboard});
});

To paste the data in another site I use this code:

$( document ).ready(function() {
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        if (request.paste) {
            if (!(request.clipboard.name === '')) {
                var nameParts = request.clipboard.name.split(' ');
                $('[id="shippingFirstName"]').val(nameParts[0])
                $('[id="shippingLastName"]').val(nameParts[1]);
            }
            }
        }
    });
});

I replace the id value regarding the second site div or input.

The problem:

If I paste the value on div it works great, but If I paste the value on input is not recognized and I need to press on a key for that.

For example:

After I paste the values:

After I click “Save” (I get an error the fields are empty):

After I press a key on the fields (even I press on “space”):

How can I solve it?

Get this bounty!!!

November 3, 2018

#StackBounty: #html #css #html5 #css3 Grid or Table? for Text and an Image on the bottom right (4/4)

Bounty: 50

Well, im pretty new to grids and a little more experienced with tables. But im still not sure which is the best way to do it.

Here, this is what i want to do:
Text all together in 3/4 parts of the area, and 1/4 with an image on the bottom right side. Considering that this is done inside a jquery mobile app/page (I guess that has nothing to do with this but i just had to mention it)

How would you guys do it?

Get this bounty!!!

September 21, 2018

#StackBounty: #html #html5 #image #firefox #srcset Width of the image displayed is not exatly 100vw when the user agent selects image o…

Bounty: 50

The user-agent selects one of the images below based on device pixel ratio and viewport size. But i have noticed that only when user-agent selects ./emmaHQbanner.jpg, the width of image displayed is not exactly 100vw instead its little more than that. I can’t figure our why ?

html

<body>
<div>
    <img sizes="100vw"  src="./emma310.jpeg" srcset="./emma720banner.jpeg 720w, ./emma1920banner.jpeg 1920w, ./emmaHQbanner.jpg 3200w" alt="picture of emma watson">
<div>

css

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}

more info

user agent - firefox on ubuntu
emmaHQbanner.jpg - Resolution (width=3200px , height=642px)

case study

viewport (width 300)  (zoom - 100%)  chosen image - 720px   (display width-300)
viewport (width 640)  (zoom - 300%)  chosen image - 1920px  (display width-640)
viewport (width 800)  (zoom - 240%)  chosen image - 3200px  (display width-900*)
viewport (width 1920) (zoom - 100%)  chosen image - 1920px  (display width-1920)
viewport (width 6400) (zoom - 30%)   chosen image - 3200px  (display width-7200*)

Get this bounty!!!

September 18, 2018

#StackBounty: #html #css #html5 #css3 #flexbox how to make different section with responsive behaviour in html

Bounty: 50

hi i’m a very new designer trying to learn designing

problems pointed by my boss:

my boss told your layout is semantically is not correct
lines are not aligned correctly
not responsive

he advised me:

convert it to flexbox as content will come dynamically, flexbox wll handle
make it such a responsive such that based on content responsiveness should be preserved

problems image:

div class=”snippet”>

div class=”snippet-code”>

*{
    margin: 0;
    padding: 0;
}

html{
    /* font-size: 62.5%; */
}

body{
    box-sizing: border-box;
    background: #ffffff;
    height: 100vh;
    padding: 2px;
    color: #A7A7A7;
}
header.main-header .main-navigation ul.nav{
    /* background: grey; */
    border-bottom:2px solid #E4E4E4;
    display:block;
    /* display:table; */
    width: 100%;
}

header.main-header .main-navigation ul.nav li{
   padding: 6px;
   border-right:1px solid #E4E4E4;
   position: relative;
   display:table-cell;
}
header.main-header .main-navigation ul.nav li::before{
  content: "";
  position: absolute;
}

header.main-header .main-navigation ul.nav li.active-nav{
    border-bottom: 3px solid #F89106;
}

#content_wrapper_search_etl{
    width: 100%;
}

#content_wrapper_search_etl::after{
    content:'';
    display: table;
    clear: both;
}

section{
    display: block;
}

.leftside-search-area{
    width: 13%;
    float: left;
    height: 98vh;
    /* background: green; */
    border-right: 1px solid #E4E4E4; 
}
.leftside-search-area input{
  border-left: none !important;
}

.center-search-area{
    width: 27%;
    float: left;
    height: 98vh;
    /* background: yellow; */
    border-right: 1px solid #E4E4E4;
}
.right-search-area{
    width: 49.3%;
    float: left;
    height: 98vh;
    /* background: orangered; */
}
.right-search-area input::-webkit-input-placeholder { /* Chrome */
    color:#FE8D51;
}
.center-search-area input::-webkit-input-placeholder { /* Chrome */
    color: #A1A1A1;
}
.right-search-area input,.center-search-area input,.leftside-search-area input{
    width: 101%;
    border: none;
    border: 1px solid #E4E4E4;
    border-top: none;
    height: 25px;
    border-right: none;
    outline: none;
    font-family: FontAwesome !important;
}

.vertical-box .box{
    display: flex;
    width: auto;
    height: 200px;
    border-bottom: 1px solid #E4E4E4;
    margin-top: 4px;
}

.vertical-box .box h4{
    font-size: 13px;
    font-weight: 300;
}

.vertical-box .box .tags ul{
   list-style: none;
}

.vertical-box .box .tags ul li{
   display: block;
   padding: 6px;
   background: #E5E5E7;
   margin-top: 19px;
 }

 .vertical-box .box .tags ul li.square{
    display: inline-block;  
    padding: 3px;
  }

.vertical-box .box .tags ul li.round{
    border-radius: 9px;
    padding: 4px 34px;
    font-size: 11px;
}

.vertical-box .box .tags ul li.tag-active{
    background: #FB8D58;
    color: #fff;
}

  
      
          
             
                  Home
                  Users
                  Settings
             
          
      
     
         
             
             
                 
                    File Types
                    
                       
                           
                           
                                                      
                                                       
                       
                    
                 </div>
                 
                   Date
                   
                        
                            Today
                            Yesterday
                            Last week
                       
                    
                 </div>
                 
                     Status
                     
                        
                            Today
                            Today
                            Today
                         
                     
                 </div>
             </div>
         </section>
         <section class="center-search-area">
                <input type="search" placeholder="    Search...">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, reiciendis. Officiis necessitatibus maiores labore quaerat ea eum maxime, ratione ut fugit in voluptatibus. Cum amet perspiciatis, quasi quae illum labore?</p>
         </section>
         <section class="right-search-area">
                <input type="search" placeholder="  Dhobi">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ipsum, saepe deleniti modi expedita minus amet doloribus impedit rem deserunt neque necessitatibus sequi nisi facilis harum tempora quae voluptate voluptatibus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi suscipit est modi exercitationem ipsum eaque, laborum iure hic nobis adipisci, magnam alias sit maxime repellat commodi quam! Numquam, repudiandae?</p>
         </section>
     </div>
  </div>