Add image as a Navbar button. Cannot change the image size with CSS

Thu Apr 03, 2014 4:39 am

Hi,
I used the code from(below) to add an image to my Navbar:
https://getsatisfaction.com/apperyio/...

The image source come from Database results so it will change depending on the user.

I can't get the image to resize with any CSS run from the "page load run JS". It loads to the full image size every time. The following is my code, my attempts at resizing are commented out, but i've tried all of them at separate times.
The nav button in question is named "nav_image".

var getPhoto = localStorage.getItem('local_picture_url');
Appery("nav_image").html("");

Code: Select all

 //Appery("nav_image").css("width","75px"); 
 //Appery("nav_image").css("height","75px"); 
 //Appery("nav_image").css("width","75px !important"); 
 //Appery("nav_image").css("height","75px !important"); 
 //Appery("nav_image").css("background-size","75px 75px"); 
 //$('div[dsid="nav_image"]').css("width","75px"); 
 //$('div[dsid="nav_image"]').css("width","75px"); 
 //$('img[dsid="nav_image"]').css("width","75px"); 
 //$('img[dsid="nav_image"]').css("width","75px");

Do you have any suggestions on a better way to resize this image to fit the navbar?
Thank you

Thu Apr 03, 2014 5:04 am

Hi Matt -

Let's take a look what you do with this code:
precode
var getPhoto = localStorage.getItem('local_picture_url');
Appery("nav_image").html('<img src="' + getPhoto + '"/>');
/code/pre
At first line you get url to the photo.

At second line you create img element code'<img src="' + getPhoto + '"/>'/code and append it to the Appery("nav_image") component.

After, you tryed to change dimensions for Appery("nav_image") element which is not an image.

Try to change dimentions of the image instead.
precode
Appery("nav_image").find("img").css("width","75px");
/code/pre
Regards.

Thu Apr 03, 2014 1:19 pm

Excellent,

That worked perfectly!

Thank you very much for your help.

Appery.io support is the best!