Tutorial make modal has scroll using bootsrap

Hi i will give simple tutorial about modal in bootsrap has scroll, Sometime we need a modify our template! Such as giving list to users, i'm trying to make diffrent things about, So check this out http://codepen.io/anon/pen/oXEKNg Feel free to comment or just say hai Freddy

Making style newspaper using HTML & Javascript Responsive

Hi again, are you fine bro ! Of courselah already finish fasting then time to kill every food

Oke, let me discussion about what make me stilll up in the night, guess what !

Girl, No !

It's Responsive Design when you need to make your website working well means all device can  access no matter what that's image or function javascript !


last month and this month i have issue that make me night mare ! look title above  and here dummy html need

Then start gooling with many keyword then i found css3 multi column then i start coding after final my html and css take coffe feel proud cause i'm success but there is something wrong, WTF CSS3 Multi columns is not good reading for human !

CSS3 MULTI COLUMNS give user read LEFT TO RIGHT not LEFT UNTIL FINISH THEN RIGHT, is it human reading or not cause i have ussual to read like that 

So i leave the css3 multi coloumns then strat googling with js column many plugin avaiable but hard to customize then i tested one by one and got nice plugin here is plugin, they give good reading for human habit.


I will not tell how to customize cause in that website already has complete documentation, really !

But take breathe first or stretching cause you will big issue after you successfully make template !

take a look the title about making Responsive Template, but first take look here  bassic setting, i will teach you how to use it to be responsive  use this function javascript



if($(window).width() < 620){ $('.childrenungan').columnize({ columns: 1 }); } else { $('.childrenungan').columnize({ columns: 3 }); }

look first if to make condition if screen 620px auto will give 1 col, here is mine

Oke i think enough for today, feel free to comment below or just say hai { Only for girl :v }

Click Scroll to Specification Div With Fixed Navbar in Bootsrap has Header

Hi how are you guys ! hope you fine especially for my friend muslim cause fasting already finish (Maksdunya Buka :v) 

Well this afternoon i will give short tutorial about title above, Hope you understand what title does mean!

when you have dummy html has effect scroll to div then you searching in googling found many plugin match after that you feel it's not good one cause every plugin when you customize with your dummy is not easy ! 

http://www.jozefbutko.com/stickynavbar/
I thought link above the best way for me but tested 3 times make me heck the documentation is not complete then i leave it.

Then i googling and i think i'm lucky i found this link http://jquery-plugins.net/tag/sticky-scroll but after 5 minutes it kill me slowly to much plugin testing and tested one by one so i leave them

so i feel lucky i found this plugin http://www.outyear.co.uk/smint/ Easy to setting you only need make simple template has header, navbar and content div so here is give simple template i used
bootsrap <div class="container"> <div class="row"> <div class="col-md-12"> <!---Here is image---> </div> </div> <div class="subMenu"> <div class="container-fluid" style="float: none;"> <nav class="navbar navbar-default"> <ul class="nav navbar-nav "> <li><a id="s1" href="#s1">Home</a></li> <li><a id="s2" href="#s2">Page 1</a></li> <li><a id="s3" href="#s3">Page 2</a></li> <li><a id="s4" href="#s4">Page 3</a></li> </ul> </nav> </div> </div> <div class="row section s1"> <!----here is content href page 1---> </div> <div class="row section s2"> <!----here is content href page 1---> </div> <div class="row section s3"> <!----here is content href page 1---> </div> </div> </form> Look navbar and eery div, i give simple explanation href="#s1" it direct you to div with class to div class section s1 for detail please go to link http://www.outyear.co.uk/smint/ But this plugin has bugs if there is href which is not scroll it will not working for example <textarea name="code" class="c#" cols="60" rows="10"> <li><a id="s1" href="#s1">Home</a></li> <li><a id="1.html" href="#s2">Page 1</a></li> <li><a id="s3" href="#s3">Page 2</a></li> <li><a id="s4" href="#s4">Page 3</a></li>



Code above not working becase there is active link which is not scroll some one have already make issue to author in github but not answering https://github.com/rabmyself/smint/issues/7 then after chat in twitter with the author the solutions is put external links in the end !


So this is my simple demo to make sense http://codepen.io/anon/pen/doJEBr Hope this tutorial help you, Please be free to disscuss another issue about it !

You can download file at here 

Thans for visiting me !

Tutorial Show and Hide Div by Click Radio Button Using Jquery

Based on experience build simple form till complex form you need to engaged jquery stuff, somet type but sometime youtime you need only fill in some input should fill all input type, so here is simple form i created for you Form detect by event click in jquery so this is the code <input type="radio" id="item_true" name="layout">Item True <input type="radio" id="item_false" name="layout">item_false <div> Here div show and hide by click radio button above </div> <!---jquery please load in ypur jquery----> $('#item_true').click(function() { $("div").hide(); }); $('#item_false').click(function() { $("div").show(); });
 To make you understand here is i make tutorial in jsfiddle Feel free to comments below, Happy COding !

Tutorial make images inside paragraph using php and mysql

Sometime as developer you don't need argue when you get job describe about css, wait minute developer should already know too about css and all design ! well as long as develope i face the hard things is that make some template article with images. The dummy design will be like this

So here i give trick, i disscuss in forum css here

1. You can make users input selector id when user input artikel in your text area then you upload images seperate with artikel, you have 2 field images and artikel, so here is your script php

  <?php $converted = ""; $img_from_DB = '<img src="http://placehold.it/350x150">'; $content_from_DB = "<p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p> #image01_goes_here#This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <p> This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> "; $converted = str_replace('#image01_goes_here#', $img_from_DB, $content_from_DB); ?> <div id="container"> <?php echo $converted; ?> </div>


2.  the second way you dont need make users should input selector images, only use php for and make it break in paragraph you want to put images so here is the code

 So that's tutorial, hope some one find this tutorial, Fell free to comment, Happy coding !