[Demetri Tashie]

make sure your images are in the correct place:

you seem to have the image called out ( kitchen.jpg) in your img folder, (which btw is the same location where the header image is…) as opposed to inside a folder called “apartment” where the code is telling it to look.

either place those aprtments images inside a folder called ‘apartment’ which is placed inside the ‘img’ folder, or else change the code to reflect where the images actually are located.

below is the path to the missing kitchen image as per your code, followed by the path to the header image for comparision.

https://thetrafalgarapartment.co.uk/img/apartment/kitchen.jpg
https://thetrafalgarapartment.co.uk/img/livingroom.jpg

and this is where the ‘kitchen.jpg’ image seems to actualy be:

https://thetrafalgarapartment.co.uk/img/kitchen.jpg

hope that can help

[Demetri Tashie]

hi josh.

on the one hand – way too much information given, and on the other hand – not enough clarity on the actual task at hand. it did take me a while to figure out what you were asking.

I don’t want to review all your files to see what is there and what is not there, but if you look at the linked file, and also view this example link you will see a VERY pared down file to just demonstrate your need. I am hoping that from this example you can figure out how to apply it to your exact working files.

download html file here:
7161_archive.html.zip

basically this is done with transitions and transforms of the image-extras class. note: this will not work in older browsers! – but who cares about older browsers, right? : – )

once again this is stripped down to the basics so you can see exactly what is needed and what is going on.
notes:

– there is only one portfolio item ( Foster Grant) for demonstration purposes
– the image-extra links were removed
– i changed the pink color #ed008e to #ffee28 just so i could see what was going on
– for this example, i added a width of 460px to the .image to restrain the effect’s width

I broke the CSS into 2 sections. the first was what is relevant from the wp-content/themes/Avada/style.css style sheet, and the second is from the CSS that was in the head of the doc

so to sum up: make sure you have this code actually contained in your files and see if t works then. if so, you are well on your way.

hope that helps

[Demetri Tashie]

sorry for jumping in here….

simon – the very first example (Variations on the basic crossfade) from Simon Battersby’s Jquery image crossfade that Curtis provided for you is exactly what you are asking:

Variations on the basic crossfade

Cycle through images once and then stop

look at his example, view the source code, and you can see the slight modifications to the code to keep it from re-cycling a second time.

cheers

[Demetri Tashie]

you could use javascript, and you would probably want to access the documents window.innerWidth and window.innerHeight and manipulate it from there. it is not as straight forward as you might think.

if you are new to javascript and wanting to do it as a learning experience, great. if you are actually trying to get a browser to be responsive to size, there are other, easier ways*.

some people really like, and others don’t like, the use of media queries for responsive sites. this uses straight CSS without the need for javascript ( because what if javascript is disablaed, or not present?)

a simple media query like this in your CSS would work. place it at the end, after the properties you want to change are aalready declared.

here i use a class of ‘visible’ assigned to anything i want changed. 940px and above it/they will show, below that , they will not

<style>
.visible {display:in-line;}
@media only screen and (max-width: 939px) {
.visible {display:none;}
</style>


use visiblity property to hold the space for the hidden item, if that is necessary.

*JQuery can make the scripting of the javascript easier ( depending on your point of view)

hope that helps

[Demetri Tashie]

you need to work with/target either the li or the a element and change some settings.

you could for instance give each list element a fixed width, or you could increase/play with the padding or margins.

here is one way, which increases the padding of each a element inside the list element from 0.5em to 3.0em:
#navMain ul li a {text-decoration: none;padding: 0em 3.0em;margin: 0;color: #fffffd;white-space: nowrap;}
play around with that and see what you come up with.

there are many other ways to accomplish this also. this is just one way.

you can take a look at this pared down file here if that helps:
5234_nav.html.zip

[Demetri Tashie]

if you work through these simple tutorials, you should get a good understanding of using AJAX to dynamically load contnet: https://www.w3schools.com/ajax/default.asp

they go through step by step how to get your AJAX xml httprequests to work

[Demetri Tashie]

this is what Flash does, and does better than any other program or animation engine. i wish apple would find a way to play nice with it. instead, we are left with pale attempts to approach the elegance of Flash.

OK – diatribe over. we have to move on. after years of happily working with Flash, like others i too have to figure out how to do certain things with the means out there. HTML5 animations with SVG graphics is getting there, but its not fully there. javascript, and particularly javascript animating engines,like JQuery or others, can be used effectively to do some nice stuff.

use Dreamweaver or whatever HTML editor you want, but you will have to code a lot of it yourself – although there is a laot of code avaialable out there.

here is a real crude example of something i was working on to mimic a flash tutorial. it does most of what you want ( the nav buttons are an animated ‘drop down’ menu. the text inthe buttons animates in ( fades in) clicking on the buttons animates the ‘pages’ in and out.

once again- it is real crude, not pretty, not elegant. it is just to show the possibility of function, witout any ‘window dressing’ to get inthe way.

you can get the code directly from the page source.

basically div positions and CSS properties are manipulated and animted to create the effect. if you have specific questions relating to this page, i will do my best to answer them.

i hope this helps you out

[Demetri Tashie]

if you want drop down menus created solely with CSS, you can try this site. they do work nice and clean:

https://www.cssplay.co.uk/menus/final_drop.html

[Demetri Tashie]

FLASH is a major software and developiong platform, extrememly popular in webwork, although since it is not supported on iPhone or iPad, it is becoming less used. It was THE platform for delivering video in the web for a long time.

Flash programs output a file with the extension .SWF
this is usually called a ‘flash movie’ (since flash used to be mainly an animation tool) , though it is not to be confused with video, which can be incorporated or compiled to play inside the .swf

WMODE parameter, to say it simply, is used in the code that puts the swf into your webpage. it’s most common usage is to create transparency for the swf, so that the background of the webpage can show through ( and thus in the example, the person seems to be floating on top of the webpage)

[Demetri Tashie]

this is basically a transparent SWF ( i.e. Flash with a transparent alpha channel).

one basic workflow :
– shoot video against a green screen
– ‘erase’ ( ‘key out’) the green screen background in your video editor
– export movie with transparent alpha channel
– bring video into Flash
– publish the swf as a tranparent background
– embed swf onto html page, with a wmode parameter of transparent