Georld.com

Hi everyone.I would like to create a discount (a sale if you prefer) that will be of the style 10$ 5$.

Here is a page that I would like this effect to be applied : http://www.georld.com/store/category/minerals-for-saleAny ideas how I can do that ?Thank you in advance!

Use CSS to specify the initial width and height of the image as 50%. On hover, set them to 100%. The initial "thumbnail" will be the larger image just shrunk down to 50%.

This sounds like a good idea. Could you point me to some links ,or could you show me what css exactly I need to add ?

From original image create thumnail, and good quality larger image to your requirements myimage01_thumb.jpg, myimage01.jpg

<script>function bigImg(x) {x.src=x.src.replace('_thumb','');x.style.height = "64px";x.style.width = "64px";}function normalImg(x) {x.src=x.src.replace('.','_thumb.');x.style.height = "32px";x.style.width = "32px";}</script>

As long as thumbnail image has '_thumb' before '.xxx' where 'xxx' is image extension, and filename without '_thumb' matches exactly between both images, they should now swap from thumbnail image and good quality larger image and back on mouseout and mouseover.The zoom is more complicated where you have to identify position of box to match larger zoomed area on larger image.

 

You can also just start with the large image where it initially displays at half size.

Thank you for your answers. Since my thumbnail is not so small, it actually is 200/253 pixels and the large image is 300/353.I have added the following code:

</script>The result was still that the zoomed image was the thumbnail enlarged which leads to poor quality. You can see it here: http://www.georld.com/store/category/minerals-for-saleRegarding Justsomeguy's answer. I don't quite understand what I need to do. Please guys speak to me as if you would speak to your young brother that has no idea what he is doing

Its basic css using :hover pseudo, since the big image is relatively small and same image used for small, use good quality resolution for large image.If you were using a image of large dimensions and filesize you would need to use js, as you would need to change from a thumbnail image filename to the larger image filename.

I am using JS now and it worked for me so I will leave it as it is. How can I do it ,so that when you hover you won't get a bad quality image? Also on my previous post I ask for mouseover zoom (like ebay or amazon),how can I do that? Is it possible?

.

I said that the example page you showed me was done in Javascript. I also suggested CSS.

 

You can't improve the quality of a small image, you need to find the source where the small image came from.

Yes indeed my bad. I don't know why I sticked to JS. Anyway I know know a few things more (JS) than before so I guess it is good.Another question.Have you ever seen on ebay or on amazon product listings that once you hover over the image you get a zoom of that picture?

Which could easily done by

.hikashop_product_listing_image {width: 32px; height: 32px; }.hikashop_product_listing_image:hover {width: 64px; height: 64px;}

Requires no JS, and does not rely on JS being enabled.

 

As an amateur my self,I just followed instructions by Ingolme. I couldn't figure out by myself how I could do that. He said JS so I just tried that way.Anyway just for me to know,what type of code is the one you posted?Also I have a small issue with the hovering. The poppup image is low resolution. Is there a way to go around this? Since the only point of the whole hover element is to give a better look on the item without you having to click on it. What I get is low quality potato enlarged photo

It's in the Javascript tutorial in the HTML DOM section: http://www.w3schools.com/js/js_htmldom.asp

That explains how to access elements on the page so that you can change them with Javascript.

Ok I've found how to change it without having to go through a few days of Javascript learning.All I had to do was change those lines:

echo '<img class="hikashop_product_listing_image" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';

to

echo '<img class="hikashop_product_listing_image" onmouseover="bigImg(this)" onmouseout="normalImg(this)" title="'.$this->escape(@$this->row->file_description).'" alt="'.$this->escape(@$this->row->file_name).'" src="'.$img->url.'"/>';

and add this code in the end of the php file:

<script>function bigImg(x) {x.style.height = "64px";x.style.width = "64px";}function normalImg(x) {x.style.height = "32px";x.style.width = "32px";}</script>

Worked like a glove!

 

It's complicated. If you don't have a good understanding of Javascript you're not going to be able to do it.

 

Javascript is put anywhere on your page between <script> tags. The code runs as the page is loading, so if you put it before the HTML element you want to modify then the element won't be accessible, so scripts are generally put at the bottom of the page.

 

What you need to do is access the element using DOM methods such as getElementById() or getElementsByTagName() and assign the event handler.

 

Here are examples of accessing elements in the DOM:

var element = document.getElementById("elementID");var listOfElements = document.getElementsByTagName("img");for(var i = 0; i < listOfElements.length; i++) {  element = listOfElements[i];  // Do something with element here}

There are multiple ways to assign event handlers such as:

element.addEventListener("mouseover", doSomething, false);element.onmouseover = doSomething;<img onmouseover="doSomething(this);">

I believe I've found what I need to edit.I've found a php file,although in the tutorial I am supposed to edit a HTML file right? Here is what I found:

Is this what I need to add ?http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseoverI think thats the property I am looking for!Could you please specify to me where should I add those lines?

They've done that with Javascript using mouseover and mouseout events. If you don't know Javascript yet you can read through the W3Schools Javascript tutorial.

 

CSS can also make an expanding animation using the :hover pseudo-class and the transition property. Information about those are in the W3Schools CSS reference.

Thank you for your answer.I did take a brief course in Javascript,and I admit I had no idea what it was. Now I do have some idea,but I think its a month's course to learn all the stuff you need to know about it.Anyway,I did took a look at the Javascript events tab,in the tutorial you sent me. Where do I need to add the code? Also I want it to apply in just the products,not in articles. I must admit I am more used to css,so do you think it will be easier by css? Will it have the same result?

Hello.I recently found a nice feature on a commercial website,that once you hover over an item,the image enlarges slightly,without you having to actually click on the product,which is time saving and nice in my opinion.On my website,hovering over products has no result,unless you click on it.You can see the effect im talking about here : http://www.newsnow.co.uk/classifieds/pets-animals/quail.htmlIf you hover over any Animal picture you can see what I mean. How can I apply this on my website?Ps. Girlfriend wants a quail

Try looking under plugin manager search for 'search' and disable unwanted search plugins 'search - news feed' etc

That did the trick! Thank you very much!

Tell me you didn't change it to span8, but ADDED span8 and not span 8.What you should be able to do is look up main menu and search modules in module manager and add required class under the module class input box.

PROBLEM SOLVED :D !Check the website it is perfect now (lol far from perfect)! Thank you so much for your time on this ! Basically all I had to do was to go,to the module called ''main menu'' through the module manager,and in the box ''Module class suffix'' I've added the simple word ''span10'' . It did the trick I have another question now. When using the search,the results I get are slightly irrelevalnt. For example the website has the meta tag ''pearl'' in it,as long as many other words. If a user searches ''pearl'' I don't want him to see all the pages that have the ''pearl'' meta tag,but I want him to see items that are named pearl,or have pearl in their text.Also in the search refinements there are unwanted options that I would like to remove as seen in the screenshot : news feeds,contacts,brands,tags because those stuff are irrelevant. Is that possible?

NOT HTML file name, html coding which is found in index.php see http://www.favthemes.com/tutorials-developers/49-how-to-change-the-width-of-the-menu.html step 3 to edit index.php, you will have to find elements shown in post #7 add add span class as shown.

I did find the element: fav-nav,and once change the value to span 8 (which is smaller) the whole nav bar got smaller,but the search box stayed where it currently is (under the home button).The element: <table cellspacing="0" cellpadding="0" class="moduletable"> Does not exist in the index.php file,so I cannot edit it.

You do not edit css, you edit html, depending on joomla version (vast difference from 2 and 3) you can find thes html element and add class to index.php or find modules, menu and add/select these classes from backend.

Sorry there are no html files in my website. They are either php,or css. I am literally lost when trying to find files. Where do I start from ? This is why I am here because I don't know.

Actually what you could do is just add class to menu container and search button container so they fit properly using percentage widths, it uses 12 grid layout so changing or adding

<div class="moduletable_menu">

to

<div class="moduletable_menu span10">

and

<table cellspacing="0" cellpadding="0" class="moduletable">

to

<table cellspacing="0" cellpadding="0" class="moduletable span2">

should fix the problem

 

Works perfect using firebug.However I cannot locate those lines in the template.css file. Here is my template css file:

That is a css cached file, it combines all your css files together and minifies them, what you should do is as i suggest and identify your template folder then look for template.css in css folder, that is more than likely the one with css for search box, you amend that file, save it, then you have to clear you joomla cache so the css files are re-cached and your amendments will show, you also have the option to select developer mode, where the cache is turned off, and works directly from individual css files.

Ok, I have found the template.css file. Could you please tell me what css I should add in it ?

Here's the tutorial that will tell you how to find your css. Even if someone just gave you the correction you probably need, you'd still have to know how to find your css to make the change.

 

This willl show you how to find it:

 

http://www.w3schools.com/css/css_howto.asp

Its in the templates folder, under your theme, in its css folder usually called template.css.But you also edit it in backend, template manager, select what would be your template and you should have list of css appear where can select and edit.

Thank you both for your answers.-Niche: the article you provided me shows how to insert CSS (if Im correct) not how to locate it. I've read it through and now I have some rough idea how to insert it,but I still dont understand how to find it ?-dsonesuk: I looked in the template.css file for the div: div.search. It doesnt exist (or my Notepad++ is buggered).Also,I do not know which value to put,so that the element will go to the right. I tried float: right; although all it does it slightly move the search box up.Also on the second attachment,you can see the supposedly source of the css file. It doesn't exist (using Filezilla).

Hello everyone!I am relatively new to the whole idea of web developing,and I am currently learning most of the things.I've created a website using joomla,but I constantly have this problem,which I cannot find how to solve.Basically joomla has its administrator control panel where you can edit some things,but if you want to edit more than the basic you have to locate,and edit css or html (correct me if Im wrong). And this is where my problem starts. Although I can sometimes edit something using firebug tool of the browser,I cannot find the css file (through FTP) to edit and make my changes permanent.Could you please show me how I can do that step by step?What I am currently trying to do is change the position of the search box (I am trying to do exactly what this website here has done with its search box,so top right corner),but there is only one ''module position'' as its called in joomla,and this is the ''nav'' position.Once the search box is placed in the nav position,it is being placed directly underneath the home tab (as seen in the screenshot).You can see in the screenshot where I would like it to be with red letters.The website is: http://www.georld.com/Help guys !