float: left – anchor's height

Today I faced a strange problem …. I have to add drop-down menu by javascript.

<a href=”http://www.svnlabs.com&#8221; style=”border:2px dotted #0000FF”><img src=”svnlabs.gif” border=”0″ style=”border:2px solid #009966″ /></a>

this is the code where I have to add a menu but menu dancing on this image.. when I mouse over the image menu appeared to bottom of the image…

here you can see output of above html code… I have marked a border around image in green and on anchor with blue color.

I think now you got the problem 🙂

Yes, now we have to apply height and width to anchor in blue color below is the code for this….

<a href=”http://www.svnlabs.com&#8221; style=”border:2px dotted #0000FF; float:left; width:70px; height:80px;”><img src=”dateblock.gif” border=”0″ style=”border:2px solid #009966″ /></a>

This is the magic for “float: left” of CSS .. here you can use “float: right” as well to apply height/width to anchor tags…..

Here you can see the output of above code the blue border with width/height of anchor tag.

 

float: left – anchor's height

Today I faced a strange problem …. I have to add drop-down menu by javascript.

<a href=”http://www.svnlabs.com&#8221; style=”border:2px dotted #0000FF”><img src=”svnlabs.gif” border=”0″ style=”border:2px solid #009966″ /></a>

this is the code where I have to add a menu but menu dancing on this image.. when I mouse over the image menu appeared to bottom of the image…

here you can see output of above html code… I have marked a border around image in green and on anchor with blue color.

I think now you got the problem 🙂

Yes, now we have to apply height and width to anchor in blue color below is the code for this….

<a href=”http://www.svnlabs.com&#8221; style=”border:2px dotted #0000FF; float:left; width:70px; height:80px;”><img src=”dateblock.gif” border=”0″ style=”border:2px solid #009966″ /></a>

This is the magic for “float: left” of CSS .. here you can use “float: right” as well to apply height/width to anchor tags…..

Here you can see the output of above code the blue border with width/height of anchor tag.

 

MVC-model-view-controller component

General definition:

Input      => Processing => Output
Controller => Model      => View

Model

The model is the part of the component that encapsulates the application’s data. It will often provide routines to manage and manipulate this data in a meaningful way in addition to routines that retrieve the data from the model. In our case, the model will contain methods to add, remove and update information about the books in the database. It will also contain methods to retrieve the list of books from the database. In general, the underlying data access technique should be encapsulated in the model. In this way, if an application is to be moved from a system that utilizes a flat file to store its information to a system that uses a database, the model is the only element that needs to be changed, not the view or the controller.

View

The view is the part of the component that is used to render the data from the model in a manner that is suitable for interaction. For a web-based application, the view would generally be an HTML page that is returned to the data. The view pulls data from the model (which is passed to it from the controller) and feeds the data into a template which is populated and presented to the user. The view does not cause the data to be modified in any way, it only displays data retrieved from the model.

Controller

The controller is responsible for responding to user actions. In the case of a web application, a user action is a page request. The controller will determine what request is being made by the user and respond appropriately by triggering the model to manipulate the data appropriately and passing the model into the view. The controller does not display the data in the model, it only triggers methods in the model which modify the data.

Source:
http://www.vojtechovsky.net/joomla/component-helloworld-2-create-tutorial-guide-en.html

 

HTMLDOC – html2image

htmldoc is a powerful simple-to-use tool/utility, which converts HTML to Postscript, PDF or indexed HTML output.

# convert /var/www/html/html2img/grid.ps -crop 280×300+40+9 -modulate 100 -geometry 530×480 /var/www/html/html2img/grid.png

here convert is ImageMagick tool for manipulating images..

 

txt2img

Here is the code to convert text to image or simply write text on image….

<?php
$img=ImageCreate (100,20);
$background_color=ImageColorAllocate($img,255,205,255);
$textcolor=ImageColorAllocate ($img,203,14,91);
ImageString($img,3,5,5,”svnlabs.com!”,$textcolor);
ImagePNG ($img, “svnlabs.png”);
$img2 = imagerotate ($img, 100, 0);
ImagePNG($img2,”svnlabs.png”);
ImageDestroy($img);
ImageDestroy($img2);
?>

 

Post update on Twitter by CURL

Now we can post updates on Twitter by CURL command line ….

CURL: It allows us to connect and communicate to different types of servers with different types of protocols (http, https, ftp, gopher, telnet, dict, file, and ldap protocols) using user+password authentication.

# curl -u USERNAME:PASSWORD -d status=”UPDATE TEXT” http://twitter.com/statuses/update.xml

Keep updating Twitter….

 

DIV – Overflow Hidden

Today I got a problem to show product title in 2 lines on product’s detail page…..

After some R&D………………..

I got solution by CSS to style a DIV with height for 2 line text and then overflow: hidden 🙂

I also used wordpress to wrap the text in next line for product’s description in 5 lines.

Amazing “DIV – Overflow Hidden” is great solution for making site symmetric 🙂

 

TinyMCE load ajax

Today I got problem to load TinyMCE as dynamic loaded textareas by Ajax?

Solution:

<a href=”javascript:void(0)” onclick=”ajaxEdit(); showEditor();”>Edit Content</a>

here ajaxEdit() is ajax function where textarea loaded by ajax as html response.

here we have use showEditor(); to load TinyMCE editor … page loaded by Ajax

<script>

function showEditor()
{

setTimeout(“initEditor(‘newsdesc’)”,4000);

}

tinyMCE.init({………………………
…………………………………………………});

function initEditor(id)
{

tinyMCE.execCommand(‘mceAddControl’, false, id);

}

</script>

 

Hindi Text Editor

akIndicPlugin is very useful for Indian language like Hindi, Marathi, Bengoli, Gujarati, Malyalam, Telugu and Punjabi….

Source:
http://amiworks.co.in/talk/akindicplugin-for-tinymce-and-joomla/
http://www.vishalon.net/IndicResources/IndicIME/tabid/244/Default.aspx

 

WordPress Themes and Blogging Tips

WpThemesPlanet.com is site dedicated to WordPress Themes and to posting interesting articles for the Blogging Community.

Here we can find more blogging tips……..