HTML & CSS: Row with image and scrollable text having height adjusted to the image size

11 04 2015

I will show how, using CSS only, to set the height of the text in a row so it never exceeds the height of the image, and then if the long text exceeds the height, make it scroll. The image dimensions may vary and are not known at the implementation phase.

The goal

The thing I need to do is:

Row with height adjusted to the height of the image, with scrollable text

Row with height adjusted to the height of the image, with scrollable text

The solution

Please take a look here: https://jsfiddle.net/an1gsdm0/

I wrapped the whole row in a table-row. The image and the text are the table-cells in it. The text’s table-cell has inline-block div with text inside. You can test it by manipulating the .image class size. Then the text field height will adjust. Here is the code:

HTML:

<div class="container">
    <div id='first' class='img-div'>
        <img class="image" src='http://png-4.findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png'/>
    </div>

    <div class="outer-text">
        <div id='second' class='text-div'>Put a long text here...
        </div>
    </div>
</div>

CSS:

.container{
    display: table-row;
}

.img-div {
    display: table-cell;
    float: left;
}

.outer-text{
    display: table-cell;

    height: 100%;
    width: 190px;
}

.text-div{
    display: inline-block;

    height: 100%;

    overflow-y: auto;
}

To test it for custom various image sizes change the height of the image:

.image{
    height: 190px;
}




jQuery: prevent copying elements from webpage

4 10 2014

Want to prevent users copying text or images on your website? Or maybe you need to add custom behaviour on Ctrl+C click event?

With jQuery you can intercept the event of copying, pasting, cutting or dragging & dropping the element on your webpage.

Prevent copying

In my case I needed to prevent copying images on webpage (the whole body). This is the method I call on document.ready callback:

var preventCopyPaste = function(){
	$('body').bind('copy paste cut drag drop', function (e) {
   		e.preventDefault();
	});
};

If you need any other custom action to be performed instead of preventing default behaviour, just implement it in method body.

Test it!

Try to copy any image from karomile.com, where I used this method. If you manage to do it – let me know how you did it. I’ll make it even more bulletproof :)

I suspect that there is one way of doing it…

Did I help you?
I manage this blog and share my knowledge for free, sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!





Android tutorial: Save Bitmap image on Android SD Card

13 07 2013

Having the Bitmap or any other image, you can store it on the SD Card (or external device memory, if it doesn’t have SD Card). These are File and Stream operations. Here is complete code how to do it. Note that similar way you can store any other file type as well.

Bitmap Storage Source Code

Here the Bitmap image is stored on an ExternalStorageDirectory in ‘myAppDir/myImages/‘ subdirectory (it is created if it didn’t exist so far).

Image is saved as PNG. You can change it according to your image file extension to JPG or another.

private boolean storeImage(Bitmap imageData, String filename) {
	//get path to external storage (SD card)
	String iconsStoragePath = Environment.getExternalStorageDirectory() + "/myAppDir/myImages/"
	File sdIconStorageDir = new File(iconsStoragePath);

	//create storage directories, if they don't exist
	sdIconStorageDir.mkdirs();

	try {
		String filePath = sdIconStorageDir.toString() + filename;
		FileOutputStream fileOutputStream = new FileOutputStream(filePath);

		BufferedOutputStream bos = new BufferedOutputStream(fileOutputStream);

		//choose another format if PNG doesn't suit you
		imageData.compress(CompressFormat.PNG, 100, bos);

		bos.flush();
		bos.close();

	} catch (FileNotFoundException e) {
		Log.w("TAG", "Error saving image file: " + e.getMessage());
		return false;
	} catch (IOException e) {
		Log.w("TAG", "Error saving image file: " + e.getMessage());
		return false;
	}

	return true;
}

Image Access

Since this is stored on the SD Card, the file will be WORLD accessible by any app or by file explorer.

Storage Permissions

Since this is operation that saves data on external memory, it requires AndroidManifest.xml permissions:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!





Android: change desktop wallpaper programatically

16 03 2013

Here is an instruction how to change desktop background on android device rogramatically by means of WallpaperManager. For simplicity the new wallpaper is taken from project resources.

private void setDesktopWallpaper() {
	try {
		WallpaperManager wallpaperManager = WallpaperManager.getInstance(this);
		wallpaperManager.setResource(R.drawable.my_wallpaper);
	} catch (IOException e) {
		SLog.e(TAG, "Error changing wallpaper: " + e.getMessage());
	}
}

To use another image (for example downloaded from the internet, you can use setBitmap method instead of setResource.

Did I help you?
I manage this blog and share my knowledge for free sacrificing my time. If you appreciate it and find this information helpful, please consider making a donation in order to keep this page alive and improve quality

Donate Button with Credit Cards

Thank You!








%d bloggers like this: