Below is an image of a HTML page that I need a little advice with.
The large square is an AJAX DIV that gets reloaded when a user changes pages. (works fine).
The smaller black rectangle is a DIV that is including in many of the pages and it has a few different states. I want to keep the current state regardless of which page the user is on and I'm struggling to work out how to include this.
I've been using PHP include but it reloads the code again each time - eg: current state lost.
I was considering using an iframe but I'm not sure if I can iframe to a DIV and then I have the added issue of the red square which pops out from the smaller black rectangle when certain selections are made. Not sure if I could include all this in an iframe when there is other information behind the red square on the page - eg: the iframe needs to overlap other information...
any advice? I can explain more/better if needed.
thx
One of the following might fit your needs:
localStorage: http://www.joelennon.ie/2011/02/11/basics-of-html5-local-storage/
PHP Sessions: http://www.php.net/manual/en/session.examples.basic.php
PHP Cookies: http://php.net/manual/en/features.cookies.php
These techniques allows you to simply save data. Say you've named your different states. Save that string in some way, and read it to decide in which state to show that black box.
Related
I am creating a user viewer for my friend's Minecraft Classic Server (in-dev version here) and below the skin is a slider. It is intended to be a zoom slider, and I need it to change the scale of the skin. The skin viewer and slider work perfectly fine; however, my trouble is in the element. It appears that I can only draw to my <img> once (code attached), and I'm not sure how to resolve that. My current plan is to delete the element and create it again, but I'm not sure how to even do that. Does anyone have any resources, tips, or information regarding this?
Page source: http://pastebin.com/R4qqTVz8
Modified mcSkinRenderer.js (courtesy of Joran de Raaff): http://ns2.nuclearstorm.net/nucsto/mcSkinRenderer.js
So here is what's happening with your code.
When you run renderMCSkins the first time, it looks through the page and finds all images with the class of 'skin'. It then REPLACES those images with canvas elements and renders the image into the new canvas. When you use the slider it runs that renderMCskins function again, only this time there are no longer images on the page with that class name because they have already been converted to canvas elements.
You have two options.
First, do as you initially thought and DELETE all instances of that canvas element, then replace it with the initial image, and run renderMCSkins with the new zoom value.
Second, you can update the mcSkinRenderer.js to include some kind of an update function to make changes to the canvas elements that have already been rendered.
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
I am using PHP to generate my page and CSS within the generated page to layout a form with absolute positioning.
I know the font being used (unless the user overrides it in the browser, of course) and the text of the button. Can I calculate the width of the button - even approximately - in PHP?
What I am trying to do is to have a for who's controls are dynamically assigned and have 3 buttons - cancel/reset/submit - at the approximate left/middle/right of the forms controls, rather than of the browser screen.
You can use imagettfbbox() to get the size of the text. Using this you can calculate the average button size (you just need to add the distance between the text and border of the button).
However, buttons should be on the left or on the right. That's how basically every native dialog does it and staying consistent with common UI paradigms/guidelines is usually a good thing.
Besides that, there's most likely a way to do it using CSS and not precalculating any sizes (and if you really have to do it, do it in JavaScript).
What I'm trying to do is load a website on a frame and then mark points on it depending on screen coordinates obtained via a function.
Do I need PHP GD?
Loading the website on the frame is not an issue. It's how to mark points on the screen that's causing my hair to fall
Nah, what you need are absolute positioned HTML elements.
You can grab the page with PHP with curl or file_get_contents() and inject some HTML/CSS into it that creates absolutely positioned <p>s or <span>s or whatever.
Checkout this post here. It uses Mootools(a JavaScript framework), PHP, and MySQL. I think it's very similar to what you are trying to do except you want to mark points on the iframe instead of doing it on an image. The plugin can be attached to an element:
David Walsh's Mootools Heatmap