android

mercredi 5 août 2015

Tornado - why does static files without StaticFileHandler donot work?

I am new to Tornado. I am trying to link a CSS file to the html template. I am using jinja2 with Tornado. But due to some unknown reasons the CSS file is not loading up.

EDIT: I have created my custom render_template function which is working fine.

Here is my Request Handler's Class:

class Index(RequestHandler):
def get(self):
    path = os.path.join('static/css/', 'custom.css')
    return self.write(render_template('index.html', path = path))

and here is my index.html template:

<!Doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="{{path}}"/>
  </head>
  <body>
    <div>
      <div class="header">
         asdasdasd
      </div>
    </div><!--wrapper-->
  </body>

</html>

but the browser is returning the 404-NotFound error for the css file with the correct url, that is http://localhost/static/css/custom.css

via Chebli Mohamed

How to make div in grid view be of 90% height of page

I want to create grid view, where header contains 10% height of the page and body 90%.

I have tried to adjust this, but body part does not grow when element section on right hand scales.

I want to add elements in right panel in responsive manner.

Is there any good way to organize this?

fiddle: http://ift.tt/1W1eZGO

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background-color:lavender;">
            <div class="header">Header Height should be 10% of the page</div>
        </div>  
    </div>

    <div class="row" >
        <div class="col-xs-8" style="background-color:lavenderblush; height:100%">Body, Height should be 90% of th page
        </div>
        <div class="col-xs-4" style="background-color:lavender;">
            <!-- 12 repeated rows as below, height should fit in 90% region in responsive manner -->
            <div class="row" >
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item1</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item2</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item3</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item4</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item5</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item6</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item7</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item8</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item9</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item10</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item11</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item12</div>
                </div>
         </div>
     </div>
</div>

</body>

via Chebli Mohamed

How to add video to html using flash player

I want to add video which is of format (mp4) to my page using flash player (not html5). I have tried this using Flowplayer but I am not able to do this:

<html>
    <head></head>
    <body>
        <div class="flowplayer is-splash"
            data-engine="flash"
            data-swf="../dist/flowplayer.swf">
            <video src="http://ift.tt/1MNeWKX" preload="none"></video>
        </div>
    </body>
</html>

Can someone please explain this? I searched a lot experimented a lot but didn't get results.

via Chebli Mohamed

Accepting and displaying HTML tags in Spring MVC Blog application

I am building a custom Blog using Spring MVC. This will have an administration module, where the Blog owner can manage articles.

The owner should be able to add HTML tags, which should then later on be displayed on the articles when a user looks at them. I.e. the owner should be able to build up the article by inputting something like:

<p>This is displayed as a paragraph <b>and this in bold</b></p>

Which should then be later on be placed as "real" html code in the article placed by Thymeleaf.

So basically, I want to be able to display actual HTML tags using thymeleaf.

What are things I should take into consideration and does Spring MVC already offer something to mitigate any security implications (for example, against XSS in case my owner's account is hijacked)?

via Chebli Mohamed

Submit datepicker with ajax

i'm having issues with submiting my datepicker.

I use the code below to load my datepicker page and other 2 pages in the page i want.

in the below html i load 3 external pages and one of those is my datepicker. every time i submit the datepicker nothing happens.

if i don't load the page via ajax, when i click on submit the data is send successfully to the database.

What do i need to change in my javascript file so i can make this working.

Thanks

$(document).ready(function() {
    //initial
    $('#content').load('content/index.php');


    //handle menu click
    $('ul#nav li a').on('click', function() {
        var page = $(this).attr('href');
        //$('#content').load('content/'+ page +'.php');

        $.ajax({
            url: 'content/'+ page +'.php',
            context: document.body,
            success: function(response){
                $('#content').html(response);   
                console.log(response);      
            }
        });

        return false;
    });
});

<html>
    <head>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

        <script src="http://ift.tt/1E2nZQG"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="js/general.js"></script>
    </head>
    <body>
        <div class="selector">
            <ul id="nav">
                <li><a href="index">Profil</a></li>
                <li><a href="planner">Planificare concediu</a></li>
                <li><a href="data">Usefull data</a></li>
                <li></li>
                <a href="logout.php">Logout</a>
            </ul>
            <div id="content"></div>    
        </div>

    </body>
<html>

via Chebli Mohamed

Detect if a textbox does not contain certain words

I want to know how to detect if a textbox does not contain certain words. For example if the textbox did not contain 'who', 'what', 'why', 'when' or 'where' some sort of function would run.

JavaScript:

function command() {
    var srchVar = document.getElementById("srch");
    var srch = srchVar.value;
    var t = srch;
    if (srch == '') {
        alert('Please do not leave the field empty!');
    }
    else if (srch.indexOf('time') != -1) {
        alert('The current time according to your computer is' + ShowTime(new Date()));
    }
    else if (srch.indexOf('old are you') != -1) {
        alert("I am as old as you want me to be.");
    }
    else {
        if (confirm('I am sorry but I do not understand that command. Would you like to search Google for that command?') == true) {
            window.open('http://ift.tt/1IMorZb' + srch, '_blank');
        }
        else { /* Nothing */ }
    }
}

HTML:

<!DOCTYPE html>
<html>
<head>
    <script src="script.js" type="text/javascript"></script>
    <link href="http://ift.tt/1f1Mm3V" rel="stylesheet">
    <script src="http://ift.tt/1dLCJcb"></script>
    <script src="http://ift.tt/1fJwIAs"></script>
</head>
<body>
    <div class="ui-widget">
        <input class="search-field" id="srch" onkeypress="searchKeyPress(event);" placeholder="ask me anything" spellcheck="false">
    </div>
</body>
</html>

via Chebli Mohamed

Trigger event on new line in contentediable div

I am trying to listen for an event that indicates a new line has been created in a contenteditable div. The purpose is to eventually show a user some options each time a new empty line is created and the caret is on that line, or if the user clicks the caret position to a currently empty line.

In my book there seem to be three events that would lead to the user being on a new line within a contentediable div:

pressing enter
pasting content that has a empty new line at the end
clicking the caret position to an empty line

of course in a contentediable div a new line means different things to different browsers, in chrome it seems to create <p></p> tags, but having browsed around SO enough it seems that other browsers might create <div></div> or perhaps another tag - <br/>

I've now tried to figure this out a couple of times and just have to get it done. Is it really the best way to listen for new elements being added under that div, and/or check if the caret position is currently within empty 'new line' tags. checking each time the caret moves seems highly inefficient - is there a better way to do this?

To summarise for tldr; people

is there a better way to check for new lines in contenteditable divs
how would i trigger an event based upon that efficiently

Just fyi this is within an Angular context and I have jQuery also.

via Chebli Mohamed