@Html.LabelFor with an tag inside it

This should be a fairly simple question, all I want to do is use @Html.LabelFor within a razor view. One of my labels is different, it has an <a> tag in it. the problem is when I use LabelFor, it encodes the html as & lt;. I've tried a lot of different approaches to making this happen but none of them are working. Here's the code.

@Html.LabelFor(model => model.Question, new { @for = "Question" })

what should get outputted:

<label for="question"><a href=\"mailto:support@testdomain.com">support@testdomain.com</a></label> ( formatted as a mailto link, stackoverflow just doesn't show it, whether i use code or not)

what does get outputted:

<label for="question"><a href=\"mailto:support@testdomain.com">support@testdomain.com&lt;/a&gt;</label>

(my < have been replaced with & lt ; without the spaces, thus the code shows on the page instead of rendering as a link)

how can I make it output what it should?

note, model.Question is set to <a href="mailto:support@testdomain.com">support@testdomain.com</a>

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 Put an Image on HTML and Make it Go Across Page?

Some computers have smaller displays, so, how do I put an image that will resize to go across the whole page? This is for a banner. Also, if it does resize, won't the quality change?

via Chebli Mohamed

ng-show, toggle right element on click [Angularjs]

I wana toggle elements but not all elements i need just one on which is clicked.

for example if I have 3 form elements and 3 buttons if I click on button 1. I just wana toggle 1. form element.

This is my current code:

angular:

$scope.formWhat = false;
$scope.formShow = function(item){
                   $scope.formWhat = !$scope.formWhat;
               };

html:

<div ng-repeat="x in comments">
<a href="#" ng-click="formShow(x)">replay</a>
       <form id="<%x.id%>" ng-show="formWhat">
        blbllblblbl
        </form>
</div>

This code will open all forms, but i need just on which is clicked, any idea?

via Chebli Mohamed

Javascript changes all image title attributes and not just the selected img

I am writing a Chrome Extension which allows people to report child sexual abuse images they find online. As soon as they report the image it should be replaced with another that is part of the extension. This all works well.

We also change the href of the image, the title and the alt. This is where things go wrong. The code is like this:

var imgs = document.getElementsByTagName("img");
  for(var idx = 0; idx < imgs.length; idx ++)
  {
    // request.greeting = an img src url
    if(imgs[idx].src == request.greeting) 
    {      
      var width = imgs[idx].getAttribute("width");
      var height = imgs[idx].height;
      var st = imgs[idx].style;

          imgs[idx].src = imgURL;  // Change the Image and set it's properties                   
          imgs[idx].href = "http:\\7ASecond.Net";
          imgs[idx].alt = "Removed by 7ASecond.Net";
          imgs[idx].title = "Removed by 7ASecond.Net";
          resizeImg(imgs[idx]);
         // imgs[idx].setAttribute("style", "width=" + width + "; height=" + height + ";");
        }
      }
    }

  });

What actually happens is that all images on the page have their title, and alt changed. Can you see the problem? Do you want to join the team to make this most needed extension? :D

via Chebli Mohamed

MEAN stack angular html tag inject not working

im new to angular so im trying something new to get used to it.

I use socket.io to get a list of images [car1...car5] and i want to dynamically inject them to the view.

in my html i have a that looks like this:

<div id="section" ng-bind-html="HTML">
    </div>

and in my core.js angular script i have:

var app = angular.module('test', []);

app.factory('socket', function () {
  var socket = io.connect('http://localhost:8080');
  return socket;
});

app.controller('TodoCtrl', function($scope, socket)
{
    socket.emit('images', {}); //send for a list of images
    socket.on('returnImages', function(data)
    {
        for(var i =1;i<=data.list.length;i++) 
        {
            $scope.HTML = '<img style="left:'+(i*50)+'px;" src="/images/'+data.list[i]+'"/>';
        }
        $scope.$digest();
    });
});

but this throws an error:

Error: [$sce:unsafe] http://ift.tt/1HJTijI etc

im following the docs so im not sure whats wrong and i tried including the angular-sanitize but I cant find the cdn link i keep getting a 404

via Chebli Mohamed

How to set an image to change source based off of two different radio buttons?

I'm starting to understand PHP pretty well, however, Javascript is still pretty new to me. I'm trying to change an image with Javascript, based on the selection of two radio buttons.

My radio buttons are as follows (one from the color set of radio buttons and one from the trim level set of radio buttons):

<input name="extcolor" type="radio" id="extcolor2'" value="Obsidian Blue Pearl" />
<input name="trimlevel" data-trim="exl" type="radio" value="2016 Honda Odyssey EX-L" />

I was able to get it to work with only one variable with this code:

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();
        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_exl_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown"> 

However, when I try to add a second variable, as is shown below, this is where the problem occurs. I can't seem to get javascript to read the data-trim data attribute in the trimlevel radio buttons and I don't think my functions are set up properly to work at the same time, but I can't for the life of me figure out how to set it up so both work. Can someone point me in the right direction?

<script type='text/javascript'>
$(document).ready(function(){
    $("input:radio[name=trimlevel]").click(function() {
        var trimlevel =$(this).attr(dataset.trim); 
        }

    $("input:radio[name=extcolor]").click(function() {
        var color = $(this).val();

        var image_name;
            image_name = ("/new-inventory-stock-images/<?=$VehicleYear?>/<?=$VehicleModel?>/configurations/base-cars/"+color+"_"+trimlevel+"_34FRONT.png");
         $('#buildyourown').attr('src', image_name);
    });
});

<img src="default-image.png" name="buildyourown" id="buildyourown"> 

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

How can I paginate the thumbnails of this jQuery image slider?

Link to code below. n.b. this is quite messy as I have dropped it in from the site.

http://ift.tt/1h8jtM5

I have an image slider, with the 'active' image on the left and thumbnails for all images on the right.

The thumbnails are automatically generated based on the images in the #slider div.

You click one of the thumbnails and the active image changes.

What I need to do at request of my client, is paginate these thumbnails to a maximum of 14 items.

After item 14, will be a 'next' link, which changes to show the remaining thumbnails.

There will not be more than 28 thumbnails, if this helps. It is fine to have a 'next' link on both the 1st and 2nd page of thumbnails - no requirement for a 'previous' link.

Thank you! This is for a important project so any help much appreciated.

Important code below but please see js fiddle above for full example.

<div class="lookbook__image">
<div id="slider1">
<img src="xxxx.jpg">
... and more images
</div>
</div>

<div class="lookbook__thumbs">
<ul class="lookbook__thumbs__list">
</ul>
</div>
</div>
<script src="http://ift.tt/1UGj41L"></script>

<script>
$(document).ready(function(){
$('#slider1').cycle({
fx: 'fade', // Here you can change the effect
speed: 'slow', 
timeout: 0,
next: '#next', 
prev: '#prev',
pager: '.lookbook__thumbs__list',
pagerAnchorBuilder: function(idx, slide) { 
return '<li><a href="#"><img src="' + slide.src + '" /></a></li>'; 
} 
});
});
</script>

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

Add a filter to an HTML document

Alright, so i have a very simple HTML page which includes a section:

<p class="gallery">
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
<a href="www.example.com"><img src="example.jpg"></a>
</p>

We want to upgrade this page so that we can put a selector at the top (probably checkboxes) with a list of tags. Each image would have multiple tags attached to it, and when one or more checkboxes are selected, only images containing all those tags are shown.

So, for example, Image 1 has "John" and "Steve" as tags,Image 2 has "Joe" and "Jack" and Image 3 has "John" and "Jack". I select the checkbox for "John" and press the filter button, and Both images 1 and 3 stay, but 2 is hidden. I then select "Jack" as well and filter again and image 1 vanishes.

What's the best or easiest way to modify this to achieve this result?

Edit: For the record, I'm not expecting someone to hand me a finished page, but i've found, through research, three or four TOTALLY different methods of filtering out lines like this but none of them i've seen so far could do quite the right thing. For example, I found this javascript combined with data-filter="Tag" and id="tag" but i have no idea if i can make it sort on multiple tags at once or how.

var posts = $('.post');
posts.hide();

$("#category li a").click(function () {

    var customType = $(this).data('filter');
    console.log(customType);
    console.log(posts.length);

    posts.hide();
    $("#" + customType).show();
});

via Chebli Mohamed

Certain css elements aren't scaling properly

I was wondering how I can correct some of these elements from moving into funny positions when the browser window is resized. I've managed to make the nav bar scale by using width: 100%; height: auto; However I'd like it so it scales neatly. Also I've learnt that using % rather than px seems to scale most things automatically. However with some elements on my site such as the team speak and server IP buttons at the top it is really hard to position them with %. As you can see from this animation of me resizing the window you can see what I mean about the nav bar and the buttons at the top. They scale but they move into funny positions, that's rather untidy. There are other elements that also move I'll provide the css for all the elements that move where they shouldn't below. Also if it helps this is my site so you can see where these elements belong.

Here is the css code for nav bar:

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

#nav_bar {background-color: #212121;
          height: 45px;
          text-align: center;
          position: relative;
          width: 100%;
          height: auto;}

#nav_bar ul {padding: 0px;}

#nav_bar > ul > li {display: inline-block;}

#nav_bar ul > li > a {color: white;
                      display: block;
                      text-decoration: none;
                      font-weight: normal;
                      padding-left: 25px;
                      padding-right: 25px;
                      line-height: 45px;
                      transition: all 0.5s ease;}

#nav_bar ul li ul {display: none;
                   list-style: none;
                   position: absolute;
                   background: white;
                   margin-left: 0px;
                   border-radius: 0px 0px 5px 5px;
                   box-shadow: 0px 1.5px 2px 0px;
                   border-left: 1px solid #BDBDBD;
                   border-right: 1px solid #BDBDBD;
                   border-bottom: 1px solid #BDBDBD;
                   color: #BDBDBD;
                   text-align: left;
                   z-index: 1;}

#nav_bar ul li a.active-page {background-color: #C62828;}

#nav_bar ul li:hover ul li a {line-height: 2em;}

#nav_bar ul li a:hover {background: #C62828;
                        transition: all 0.5s ease;}

#nav_bar ul li:hover ul {display: block;}

#nav_bar ul li ul li a {color: #000000;
                        display: block;}

#nav_bar ul li ul li a:hover {background: #1565C0;
                              color: white;
                              transition: all 0.5s ease;}

Here is the css code for the top buttons:

#logo {position: relative;
       top: -70px;
       text-align: center;}

#ip_box {width: 210px;
         height: 43px;
         background: #212121;                 
         color: white;
         font-size: 15px;
         top: 0;
         left: 150px;
         position: absolute;}

#ip_text {bottom: 85px;
          top: 4px;
          left: 138px;        
          color: white;
          position: absolute;}

#teamspeak_box {display: block;
                width: 159px;
                height: 43px;
                background: #212121;
                position: absolute;
                top: 0;
                right: 154px;
                transition: all 0.5s ease;}

#teamspeak_box:hover {/*border-bottom: 4px solid #C62828;*/
                      background: #313131;
                      transition: all 0.5s ease;}

#teamspeak_box a {display: block;
                  height: 43px;}

#teamspeak_box_2 {display: block;
                  width: 43px;
                  height: 43px;
                  background:#313131;
                  position: absolute;
                  left: 0;
                  top: 0;}

#teamspeak_image {display: block;
                  position: absolute;
                  top: 5px;
                  left: 5px;}

#teamspeak_text {display: block;
                 color: white;
                 position: absolute;
                 top: 14px;
                 right: 10px;
                 font-family: 'Roboto', sans-serif;}

And lastly the css for the social media buttons at the bottom:

#social_media_youtube {float: left;
                       position: relative;
                       bottom: 12px;
                       left: 675px;}

#social_media_twitch  {float: left;
                       position: relative;
                       bottom: 10px;
                       left: 575px;}

#social_media_twitter {float: right;
                       position: relative;
                       bottom: 20px;
                       right: 675px;}

#social_media_facebook {float: right;
                        position: relative;
                        bottom: 13px;
                        right: 575px;}

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

Google charts HTML tooltip for Sankey

I am using Google charts to display a Sankey diagram on my webpage. On clicking each link I would like the page to redirect to another page.

The problem is the 'select' handler in Sankey is not working, and is a known issue. To overcome this I added a HTML tool-tip to my links and gave a button, such that if user clicks the button then they are redirected to next page.

The problem with this solution is that I am unable to control where the tool-tip appears, so for certain links the tool-tip appears above the link. In this case the user can never reach the button because the tool-tip disappears the moment they move away from the link.

Can you please suggest a solution to either the original problem, or this tool-tip side effect?

via Chebli Mohamed

Where is the best place to store supporting JSON on dynamic AJAX load?

Scenario: I have an HTML page with a dynamic modal dialog. Links on the page open the dialog, but with different contents according to the clicked link. Dialog contents are loaded using an AJAX request, and include only the required HTML - no html or head tags, for example.

In the dialog, there is a 'Status' display, and a couple of date pickers (e.g. 'Activated' and 'Removed'). As the dates change, the Status should update to show the current status according to the dates. That I can do, no worries.

In the application I have an enum for the Status, and I want the JavaScript in this dialog to make use of the same list of statuses as the server-side app. I figure the MVC should generate some JSON, listing the enum entries, for example:

{ "active": "Active", "removed", "Removed" }

Now the question! Where's the best place to put this JSON in the page, if it is loaded with the modal contents? Here are some options I've considered:

• I could store it in a var in the head, but I don't need it to appear in every page in the application.
• I could insert it into the head, or add it to the document element, when the modal is loaded, using a JS function called by the modal contents.
• I could store it in the data tag of the Status display element.

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

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

Google SEO Description

I have a website that is live, I google the URL of the website to see if it is on there. And it is, but the website description on google doesn't match the meta tag description I have written in the head of the web page.

Any reasons why this is?

via Chebli Mohamed

html in perl keeps giving me wrong outputs i cant figure it out

This auth.pl file suppose to show login screen with username and password forms but keeps giving me the wrong outcome. What am i doing wrong here?

#!/usr/bin/perl

use CGI::Carp qw(fatalsToBrowser);
use CGI qw( :standard );

$user = param( "user" );
$password = param( "password" );

$user = param( "user" );
$password = param( "password" );

print <form method="GET" action="http://ift.tt/1MqFQJI">;
print "<html>";
print "<center>";
print "<h1>Login</h1>";
print 'Username<br/><input type="text" name="user"><br/>';
print 'Password<br/><input type="password" name="password"><br/>';
print '<font size="-1"><input type="submit">';
print "</center>";
print "</html>";

if ($user eq "username" && $password eq "password") {
    print "Content-type: text/html\n\n";
    print "<html>";
    print "<head>";
    print "Login Successful";
    print "</body>";
    print "</html>";
}
else {
    print "Content-type: text/html\n\n";
    print "<html>";
    print "<head>";
    print "Login Unsuccessful";
    print "</body>";
    print "</html>";
}

via Chebli Mohamed

How do I verify that a update message is successful in MySQL with PHP?

I am having no issue running a select statement but I keep having issues running this update statement, even without where criteria being specified. I have tried everything from defining the sql statement with single quotes, concatenation, calling the sql statement via mysqli and etc but I don't get any error messages that let me know what the actual problem is. The login user has privileges to select, update, and insert so as to separate from the root user and autocommit has been turned off via mysqlworkbench. The html of course is a one page app that submits the form to itself with a select element named p_game, with one of the options being Game A.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    echo 'Posted.';
    if ( !empty($_POST['p_game'])) {
        echo 'Got here';
        $p_game = $conn->real_escape_string(trim($_POST['p_game']));
        $sql = "UPDATE db_name.football_games set home_score = 50, away_score = 100 where name = ''$p_game''";

        try{
            $result = $conn->query($sql);
            echo $sql;
            $conn->commit();
            echo 'Commit worked.';
        }

        catch(Exception $e) {
            echo $e->getMessage();
        }

    }
    else {
        echo 'Game name not found';
    }
}

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

Label appears in IE but not Chrome?

I'm working on a website that displays a lot of products in little "cards" so they all appear in the same format, however... some of the products are displaying in Chrome without their prices, I've checked in other browsers and the issue is only in Chrome.

This is taken form Internet Explorer and shows what the product cards should look like.

And this is the same product in Chrome:

Very helpfully displaying a cost of not there.

HTML - The label in question is lblProductPrice

<div class="index-row">
    <asp:DataList runat="server" ID="dlFeaturedProducts" RepeatColumns="5" RepeatDirection="horizontal" RepeatLayout="Flow" >
        <itemstyle VerticalAlign="top" />
        <itemtemplate>
            <asp:Panel ID="pnlProduct" runat="server" defaultbutton="btnBuy">
                <div class="gallery-product">
                    <div class="gallery-product-image">
                        <asp:HyperLink ID="hlProductImage"  runat="server"><img id="imgProduct" runat="server" /></asp:HyperLink>
                    </div>

                    <div class="gallery-product-details">
                    <div class="gallery-product-freight">
                            <span runat="server" id="divFreeFreight" visible="false"><img src="images/free-delivery.png" alt="Free Shipping On This Item" title="Free Shipping On This Item" /></span>
                        </div>
                        <div class="gallery-product-title">
                            <asp:HyperLink ID="hlProductTitle" runat="server"></asp:HyperLink></strong><asp:Label ID="lblProductID" runat="server" Visible="false"></asp:Label>
                        </div>
                        <div class="gallery-product-price">
                            <asp:Label ID="lblProductPrice" runat="server"></asp:Label> <span class="gallery-product-price-gst">Incl GST</span>
                        </div>
                        <div class="gallery-product-usually">
                            <span id="pnlUsually" runat="server"><asp:Label ID="lblWas" runat="server"></asp:Label><asp:Label ID="lblListPrice" runat="server"></asp:Label></span>&nbsp;
                        </div>

                          <div class="gallery-product-blurb">
                            <asp:Label ID="lblWebBlurb" runat="server"></asp:Label>
                        </div>
                    </div>
                    <input name="hidden" type="hidden" id="UniqueCode" value="" runat="server" />
                    <div class="gallery-buy-bg">
                        <div class="gallery-buy">
                            <asp:TextBox ID="txtQuantity" Text="1" Width="25" MaxLength="4" runat="server" CssClass="textbox" style="text-align:center"></asp:TextBox><br />(quantity)
                        </div>
                        <div class="gallery-buy-button">
                            <div class="grey-button">
                                <asp:LinkButton ID="btnBuy" runat="server" title="Add to Cart" Text="Add to Cart" CommandName="Add" />
                            </div>
                        </div>
                    </div>
                </div>
            </asp:Panel>
        </itemtemplate>
    </asp:DataList>
</div>

VB.Net - I've tried setting the value for lblProductPrice before, after and in the if/else statement and it makes no difference to either browser.

'Show Product Savings even if discount level on login
            If dr("SELLPRICE9") > 0 And dr("pListPrice") = 0 Then
                If ((dr("SELLPRICE9")) - dr(c.GetPriceLevel())) > ((dr("SELLPRICE1")) - dr(c.GetPriceLevel())) Then
                    'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
                    'lblProductPrice.ForeColor = Drawing.Color.Black
                    lblListPrice.Font.Strikeout = True
                    lblWas.Text = "RRP "
                    lblWas.ForeColor = Drawing.Color.Red
                    lblListPrice.Text = "$" + FormatNumber(dr("SELLPRICE9"), 2)
                    lblListPrice.ForeColor = Drawing.Color.Red
                Else
                    lblWas.Text = ""
                    'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
                    'lblProductPrice.ForeColor = Drawing.Color.Black
                    lblListPrice.Text = ""
                End If

            Else
                If (dr("SELLPRICE1")) > (dr("pListPrice")) Then
                    'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
                Else
                    'lblProductPrice.Text = "$" + FormatNumber(dr(c.GetPriceLevel()), 2)
                    lblWas.Text = "Save $"
                    lblListPrice.Font.Strikeout = False
                    lblListPrice.Text = FormatNumber((dr("pListPrice") - dr(c.GetPriceLevel())), 2)
                    If (dr("pListPrice") - dr(c.GetPriceLevel())) = 0 Then
                        lblListPrice.Visible = False
                        lblWas.Visible = False
                    End If
                End If
                'If lblListPrice.Text <= 0 Then
                '    Dim pnlUsually As HtmlContainerControl = CType(e.Item.FindControl("pnlUsually"), HtmlContainerControl)
                '    pnlUsually.Visible = False
                'End If
            End If
            lblProductPrice.Text = "$" + FormatNumber(dr("SELLPRICE1"), 2)
        End If

via Chebli Mohamed

Having trouble executing the user id session after user logs in

Here is the following codes i have so far for the sign up page login page and homepage. note i am only posting the php I know everything is working except for the user id session. I am connected to my database and row 1 is id and is the primary key.

here is the signup php

<?php
require ("func/insert.php");

if(isset($_POST['Submit']))
    {
        $first_name = mysqli_real_escape_string($con, $_POST ['first_name']);
        $last_name= mysqli_real_escape_string($con, $_POST ['last_name']);
        $email= mysqli_real_escape_string($con, $_POST ['email']);
        $password= $_POST ['password'];

        $StorePassword= password_hash($password, PASSWORD_BCRYPT, array('cost' => 10));

        $sql = $con->query("INSERT INTO users ( first_name, last_name, email, password)
                    VALUES ( ' {$first_name} ' , ' {$last_name} ' , ' {$email} ' , ' {$StorePassword} ' )");
        header('Location: login.php');
    }
?>

HEre is the login php

<?php require ("func/insert.php"); ?>
<?php
    if(isset($_POST['Login']))
    {
    $email= mysqli_real_escape_string(htmlentities($con, $_POST ['email']));
    $password= mysqli_real_escape_string(htmlentities($con, $_POST ['password']));

    $result = $con->query(" select * from users where email='$email' AND password='$password' ");

    $row = $result->fetch_array(MYSQLI_BOTH);

    session_start();

    $_SESSION['UserID'] = $row['id']; //thinking this is the problem
    header ('Location: home.php');
    }

And here is the home php

<?php require ("func/insert.php"); ?>
<?php
session_start(); 
    if (isset($_SESSION['UserID'])) {
}
else {
echo "This session is not working.";
}
?>

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

.PHP form submit not working

I have been trying to figure this stupid PHP thing for 2 days now. I am designing a website for my wife who is a personal trainer. I would like people to be able to submit their contact info to her via a form I have on the site. I have no clue how to code PHP myself, so I snagged a "working model" and made some edits to fit my site. Here is the HTML code:

<form name="contact" method="post" action="formsubmit.php">             
<li>

<input name="first_name" type="text" value="first name (Required)" onfocus="if(this.value == 'first name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'first name'; }" />

<input name="last_name" type="text" value="last name (Required)" onfocus="if(this.value == 'last name') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'last name'; }" />

<input name="email" type="text" value="email (Required)" onfocus="if(this.value == 'email (Required)') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'email (Required)'; }" />

<input name="telephone" type="text" value="phone" onfocus="if(this.value == 'phone (Required)') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'phone'; }" />

<input name="comments" type="text" value="What are your goals?" onfocus="if(this.value == 'What are your goals?') { this.value = ''; }" onblur="if(this.value == '') { this.value = 'What are your goals?'; }"  />

 <div class="g-recaptcha" data-sitekey="I am using site key here, just wasn't sure if the public should be privy to that info or not"></div>

 </li>
 </form>

 <li>
 <input type="submit" value="SUBMIT" class="submitbtn" form="contact" />
 </li>

And here is the .php

<!doctype html>
<html>
<head>

<!-- CSS -->
<link href="main.css" rel="stylesheet" type="text/css" />

<meta charset="UTF-8">
<title>We Will EnduroFit</title>
</head>

<body>
<?php

if(isset($_POST['email'])) {



    // EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "jasmine@freedomseed.org";

    $email_subject = "Message from EnduroFit visitor";        

    function died($error) {

        // your error code can go here

        echo "I am sorry, but there were error(s) found with the form you submitted.";

        echo "These errors appear below.<br /><br />";

        echo $error."<br /><br />";

        echo "Please go back and fix these errors.<br /><br />";

        die();

    }  

    // validation expected data exists

    if(!isset($_POST['first_name']) ||

        !isset($_POST['last_name']) ||

        !isset($_POST['email']) ||

        !isset($_POST['telephone']) ||

        !isset($_POST['comments'])) {

        died('I am sorry, but there appears to be a problem with the form you submitted.');       

    }  

    $first_name = $_POST['first_name']; // required

    $last_name = $_POST['last_name']; // required

    $email_from = $_POST['email']; // required

    $telephone = $_POST['telephone']; // not required

    $comments = $_POST['comments']; // required     

    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

  if(!preg_match($email_exp,$email_from)) {

    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

  }

    $string_exp = "/^[A-Za-z .'-]+$/";

  if(!preg_match($string_exp,$first_name)) {

    $error_message .= 'The First Name you entered does not appear to be valid.<br />';

  }

  if(!preg_match($string_exp,$last_name)) {

    $error_message .= 'The Last Name you entered does not appear to be valid.<br />';

  }

  if(strlen($comments) < 2) {

    $error_message .= 'The Comments you entered do not appear to be valid.<br />';

  }

  if(strlen($error_message) > 0) {

    died($error_message);

  }

    $email_message = "Form details below.\n\n";  

    function clean_string($string) {

      $bad = array("content-type","bcc:","to:","cc:","href");

      return str_replace($bad,"",$string);

    }

    $email_message .= "First Name: ".clean_string($first_name)."\n"; 
    $email_message .= "Last Name: ".clean_string($last_name)."\n"; 
    $email_message .= "Email: ".clean_string($email_from)."\n"; 
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";


// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);  

?> 

<!-- include success html here --> 

<h2>Thanks! I will respond to you soon :)</h2>

<?php

}

?>
</body>
</html>

If anyone can take a look at that and tell me what I am missing. I am about to throw something (or just delete the stupid form altogether and say screw it). The submit button just acts like its dead. It does nothing at all. I know it was working as a model, so I have no idea what I did/did not change to break the stupid submit button. Thanks a million!

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

Why is this angular ui-bootstrap select dropdown does not call the function on ng-click? [duplicate]

This question already has an answer here:

• Can I use HTML tags in the options for select elements? [duplicate] 4 answers

Below is a snippet of the code. I'm able to call the function if I was to use a regular button. However, if I was to use it as below, the function never gets called. The code below is in jade.

.col-sm-12.subSection(ng-controller="EnvSelector as envSelector")
    label Select Bucket
    select.form-control.btn.dropdown-toggle
        option(ng-repeat="bucket in envSelector.env.getBuckets()")
            a(href='#', ng-click='setBucket(bucket)') {{bucket.name}}

EDIT: The funny thing is, this approach works:

.col-sm-12(ng-controller="EnvSelector as envSelector")
    .btn-group(dropdown='', is-open='status.isopen')
        button.btn(type='button', dropdown-toggle='', ng-disabled='disabled')
            | {{envSelector.chosenBucket.name}}
            span.caret
    ul.dropdown-menu(role='menu')
        li(role='menuitem', ng-repeat='bucket in envSelector.env.getBuckets()')
            a(href='#', ng-click='setBucket(bucket)') {{bucket.name}}

However, I want to use the select approach. How can I make that work?

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

Need to writing a valid regular expression (regex)

I have an input field on my website which uses pattern matching in the HTML It needs to have - Lowercase a-z (not upper) - All numbers (0-9) - Allows underscores (_) but NOT spaces - Minimum of 4 characters with a max of 12. - Does not allow special characters such as @, #, $, %, ^, * etc.

Right now I have pattern="(?=.*[a-z0-9_]).{4,12}" The problem seems to be that it does allow special characters.

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?

html

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

css

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

http://ift.tt/1L9EPm6

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

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

Java Script Calculating and Displaying Idle Time

I'm trying to write with javascript and html how to display the time a user is idle (not moving mouse or pressing keys). While the program can detect mousemovements and key presses, the program for some reason isn't calling the idleTime() method which displays the time in minutes and seconds.

I'm wondering why the method isn't getting called, as if it is called it would display true or false if a button is pressed.

var startIdle = new Date().getTime();
var mouseMoved = false;
var buttonPressed = false;

function idleTime() {
  document.write(buttonPressed);
  if (mouseMoved || buttonPressed) {
  startIdle = new Date().getTime();
  }
  document.getElementById('idle').innerHTML =   calculateMin(startIdle) + " minutes: " + calculateSec(startIdle)   + " seconds";
  var t = setTimeout(function() {
  idleTime()
  }, 500);
}

function calculateSec(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleSec = Math.ceil(timeDiff / (1000));
  return idleSec % 60;
}

function calculateMin(startIdle1) {
  var currentIdle = new Date().getTime();
  var timeDiff = Math.abs(currentIdle - startIdle1);
  var idleMin = Math.ceil(timeDiff / (1000 * 60));
  return idleMin;
}

var timer;

// mousemove code
var stoppedElement = document.getElementById("stopped");

function mouseStopped() { // the actual function that is called
   mouseMoved = false;
   stoppedElement.innerHTML = "Mouse stopped";
}

window.addEventListener("mousemove", function() {
   mouseMoved = true;
   stoppedElement.innerHTML = "Mouse moving";
   clearTimeout(timer);
   timer = setTimeout(mouseStopped, 300);
});

//keypress code
var keysElement = document.getElementById('keyPressed');

window.addEventListener("keyup", function() {
   buttonPressed = false;
   keysElement.innerHTML = "Keys not Pressed";
   clearTimeout(timer);
   timer = setTimeout("keysPressed", 300);
});

window.addEventListener("keydown", function() {
   buttonPressed = true;
   keysElement.innerHTML = "Keys Pressed";
   clearTimeout(timer);
   timer = setTimeout("keyPressed", 300);

});

function checkTime(i) {
   if (i < 10) {
      i = "0" + i
   }; // add zero in front of numbers < 10
   return i;
}

Here is the HTML code:

<body onload="idleTime()">


    <div id="stopped"><br>Mouse stopped</br></div>
    <div id="keyPressed"> Keys not Pressed</div>

    <strong>
      <div id="header"><br>Time Idle:</br>
      </div>
    <div id="idle"></div>


    </strong>
  </body>

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

Multiple Replacements Honoring Capitalization and Punctuation

I'm attempting to create a script that replaces keywords found in body with <strong> tags. <strong>keyword</strong>

The problem is words can be capitalized or have punctuation like dog's toy (whereas I'd be aiming for dog, the strong tag would cut off 's)

I'm trying to create an efficient and dynamic replacer that works as described.

So far this is what I have:

def strongwords(text, dict):
    rc = re.compile('|'.join(map(re.escape, dict)))
    def translate(match):
        return dict[match.group(0)]
    return rc.sub(translate, text)

Unless I create a HUGE dict with every possibility (as described above) and expend resources on find/replace, I do not see this working as desired.

Is there a pythonic way to do this with a proven regex recipe? Perhaps a package or module has been designed for this?

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

HTML file input with possibility to input several files one after another

I'm looking for a possibility to input several files in a row in an HTML form. It strikes me that there seems to be no easy solution for this (or at least I haven't been able to find it despite several hours of searching). If I use the multiple attribute in an <input type="file" name="myFiles[]" multiple />, I can choose several files at a time holding Ctrl, but if I choose one file at first, then click the input field again and choose another one, the second file seems to overwrite the first one. So I thought I might try to use javascript to add more fields since I have seen something similar somewhere. I tried thie following:
JavaScript:

function addInputFileEle() {
    var field = document.getElementById("filesField");
    var row = '<input type="file" name="myFiles[]" onchange="addInputFileEle();" />';
    field.innerHTML += row; // add one more <input type="file" .../> element
}

HTML:

<form method="post" action="#">
     <fieldset id="filesField"> <!--for adding more file-input rows-->
         <input type="file" multiple name="myFiles[]" class="multi" <!--onchange="addInputFileEle();"--> />
     </fieldset>
     <input type="submit"/>
 </form>

The document indeed does create additional file-input elements whenever I click on one of them and select a file, BUT: The file does not get uploaded! I mean, after I select the file, the file name does not get displayed, instead, it still says "Choose a file" (or "Select a file", not sure about English). So apparently my onchange() function overwrites the normal reaction (the file getting 'loaded' into the input element)? Even though this does not seem logical to me. Can anyone help? Why does the file not get selected in the end? Or maybe there is a simpler solution than mine, which would of course be very welcome. Thanks in advance!

via Chebli Mohamed

img insert into HTML from javascript

So I am trying to insert images into <marquee> from a js file. This is what my js file looks like?

      function buildList(){
            var data= ['logo1.png', 'logo2.png', 'logo3.png'];

            //var data2 = [{2:"hello"},{3:"world"},{6:"PSI"},{4:"ali"},{7:"buck"},{1:"hello"},{8:"albert"},{5:"wow"}];
            var marquee = document.getElementsByTagName('marquee');


            for(var i in data){

                    var img = new Image();
                     img.onload = function() {

                    //var newListItem = ' ' + data[i] +  ' there should be an img coming in from an array here';


                                   return img;
                };
                    img.src = data[i];
                    marquee[0].innerHTML  +=  img ;
            //http:http://ift.tt/1cWxZTP"alt="Milford Sound in New Zealand' "Width=80 Height=80" ' + img;
            }   







        }

However when I look at the developer console in chrome, I get no error messeges by inside the marquee it is giving me [object HTML ImageElement]... What am i doing wrong?

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

User inputs, clean and sanitize before sending to db

I've searched a lot of the questions here and I found that they either very old or suggesting using prepared statements PDO which I am not using. So I need your help please.

I have a small discussion/chat box where a user submit a message using a <textarea>

What I need is sanitize and filter the user input so it only accepts plain texts (e.g. no tags, no html tags, no scripts no links, etc). Also, it is important to allow line breaks.

Based on my reading I am doing the following in the following order:

1. trim()
2. htmlentities($comment, ENT_NOQUOTES)
3. mysqli_real_escape_string()
4. nl2br()

Is what I am doing is right? or I am missing something?

Also is there anything I have to do when echoing the data from the db?

really, appreciate your help and kindness

via Chebli Mohamed

Select2 dynamic dropdowns with templating

Trying to work out how to use the select2 templating function with a dynamic select2 dropdown to also show the extra data in a JSON response

Example data

{"id":"12","value":"DASGDSA67","otherData":"Brunswick","extraData":"Heads"}

View (Javascript)

<script type="text/javascript">
$(document).ready(function() {
    $(".company2").select2();
    $(".location2").select2({
        templateResult: formatState
    });
});

$(".company2").select2().on('change', function() {
var $company2 = $('.company2');
$.ajax({
    url:"../api/locations/" + $company2.val(),
    type:'GET',
    success:function(data) {
        var $location2 = $(".location2");
        $location2.empty();
        $.each(data, function(value, key) {
            $location2.append($("<option></option>").attr("value", value).text(key));
        }); 
        $location2.select2();
    }
});
}).trigger('change');

function formatState (state) {
  if (!state.id) { return state.text; }
      var $state = $(
         '<h1>' + state.element.value() + '</h1>' + '<p>' + state.element.otherData() + '</p>'
      );
  return $state;
};
</script>

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

C# trying to isolate name from html using regex

<a href="||blablabla link||" title="||blablabla title of torrent|| torrent">||THE STRING THAT IM INTERESTED IN--NAMES||</a>

im working on an html file that contains 20-30 of the above format lines ! Im interested in saving all of the NAMES in an array list. My problem is that i cant quite understand regex format to get each NAMES what pattern should i use ? How do i use this pattern to capture every name in this html string ? thank you !

via Chebli Mohamed

This div seems stuck in the navigation area...?

The form at the top of this page: http://ift.tt/1UFowBR is supposed to go under title "Testing the Builder Thing" but no matter where I put the "header" "div" or "article" tags around the iframe for the form, it doesn't budge. I tried looking into the css for it, but I must be missing something. And I know it's gotta be a simple something!

Any ideas?

via Chebli Mohamed

How can I redirect to home page after video stops

I am using Cincopa to embed my video into my website. The page that it is embedded in is hidden and navigation is removed. So I would like everyone to be redirected to the home page once the video is finished.

Here is my code:

<div id="cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826">...</div>
<script type="text/javascript">
    var cpo = [];
    cpo["_object"] = "cp_widget_55a42f1b-6e51-4738-87f9-eaf52dc6a826";
    cpo["_fid"] = "AsBAj2M3MQOr";
    var _cpmp = _cpmp || [];
    _cpmp.push(cpo);
    (function() {
        var cp = document.createElement("script");
        cp.type = "text/javascript";
        cp.async = true;
        cp.src = "//www.cincopa.com/media-platform/runtime/libasync.js";
        var c = document.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(cp, c);
    })();
</script>
<noscript>Powered by Cincopa <a href='http://ift.tt/1kTdl6w'>Video Hosting for Business</a> solution.<span>Test</span><span>bitrate</span><span> 39961 kb/s</span><span>height</span><span> 1080</span><span>duration</span><span> 00:02:35.31</span><span>lat</span>:<span> +33.2269</span><span>long</span>:<span> 21-96.93</span><span>fps</span><span> 59.94</span><span>width</span><span> 1920</span><span>originaldate</span><span> 2015-06-06 19:08:58</span>
</noscript>

via Chebli Mohamed

Error in c program when not using header file

Scenario :
A c application created in netbeans ide with below two files

some_function.c

#include <stdio.h>
int function_1(int a, int b){
    printf("Entered Value is = %d & %d\n",a,b);
    return 0;
}

newmain.c

#include <stdio.h>
#include <stdlib.h>
int main(int argc, char** argv) {
    //function_2(); //Error //function name not allowed
    function_1();
    function_1(1);
    function_1(1,2);
    return (EXIT_SUCCESS);
}

When learning the need of the header file in a c program, I tried the above application (as it is). It got compiled and gave the output as below

Entered Value is = 4200800 & 102
Entered Value is = 1 & 102
Entered Value is = 1 & 2

Question 1 : Is my assumption correct, that when linking, "the linker will check for the function name and not the arguments" when the header file not used?

Regarding the header file usage, I came across this link and there it said as, we can include the c file itself using the #include. So i used the below line in the file newmain.c

#include "some_function.c"

As expected it shown the below error

error: too few arguments to function 'function_1()'
error: too few arguments to function 'function_1(1)'

And also i got the below (unexpected) error.

some_function.c:8: multiple definition of `function_1'
some_function.c:8: first defined here

Question 2: What error I did when including the 'c' file itself, as it gives the above said (unexpected) error?

Rust assign to *mut c_void

I am writing bindings for a library, where I have a function with a parameter of type void* aka *mut c_void in Rust. I have to assign a [u8] to this parameter, how can I do this in Rust? I've tried casting, transmute, it doesn't work (transmute says that c_void and [u8] are of different sizes). If it matters, I am getting the array from a vector.

what happens when increment counter and test counter are interchanged in for-loop syntax?

please explain why

int main()
{
    int i;
    for(i=1;i++;i<100)
    printf("%d",i);
    return 0;
}

results in infinite loop, whereas

int main()
{
    int i;
    for(i=0;i++;i<100)
    printf("%d",i);
    return 0;
}

doesn't run the loop even once? Please clarify how to interpret this kind of syntax?