I am using joomla 1.5 for one of my cms projects. In the top-left corner there is a box with a curve image. But it shows a rectangle box. When I view the source using firebug its shows the curve image so please help me whats problem besides it.
my site url is
http://sunflowerhospital.in/
thanks in advance
Praveen Kalal
Wow, you should seriously consider recoding all of those tables in to some clean DIVs. You've got like 5 nested tables right around the news box that makes it near impossible to tell what is going on.
Anyhow, I digress. The problem is that the image is 184px wide while your box is only 170px wide. The curves are there, but they are outside the bounds of the table.
Related
I have a website I'm working on that utilizes DaisyUI and Alpine.js (with intersect plugin).
In one of my templates I have a stepper with sections of content relating to each step. When you click one of the steps to the stepper, it scrolls you to the related section. That part is easy peasy. The difficulty is getting the step to highlight when you've scrolled to the related content manually. My lack of understanding of the intersection observer is what is throwing me off.
Here is a pen I made as a simple illustration of what I'm trying to do: https://codepen.io/jtomeck/pen/dyeVONz
The pen only shows the use of x-intersect alone. It works-ish, but you'll notice that there are bugs if you make the viewport taller. I'd ideally like the step to only highlight when the content is near the top of the screen, or at least more than halfway above the center of the viewport. I've tried:
Using threshold, but there are bugs since it does not observe the direction (from top of viewport or bottom of viewport) the intersection is happening from, as well as the threshold being defined as a percent creates strange behaviors on different sized screens.
Using margin, but it did not appear to work at all. I believe this is option is the right solution, but I'm struggling to find the proper resources online specific to my problem. I believe the answer will come if I can figure out how to manipulate the margin using enter and leave.
If someone wouldn't mind helping me with this I'd greatly appreciate it. Bonus points if all previous steps can remain highlighted when a new step is reached :). Not a requirement though!
I'd like to request that all answers continue to utilize alpinejs since it is a constraint of the project. Thank you in advance!
TLDR - Can anyone help me figure out how to use alpinejs and its intersect plugin to make the step of a stepper component highlight when the content it relates to reaches a certain position in the viewport (scrollspy effect)?
Update: Updated codepen to use:
x-intersect.margin.10%.0.0.0="shownStep = ' STEP NUMBER ID HERE '"
According to the documentation the expected behavior would be to detect intersection "when the element gets within 10% of the top of the viewport." It does not appear to work any differently than just using x-intersect without the margin added. I'm very curious why margin does seemingly nothing. I'm going to keep looking into it, but I'd very much appreciate any guidance anyone can provide about rootMargin and why the intersect plugin does not seem to be applying it properly.
I am try to get text to wrap around my intro image, I select float image left but it doesn't float left. Does anyone know of this issue and how to fix it?
This is the site: http://www.benidormallyearround.com/
I think the problem is generated by the block roksocialbuttons, inserting several Div not possible to apply the CSS rule on the image.
Place the image after the social buttons.
you are asking about this attached image alignment issue right? I little confused..
I would like to add thumbnails to my product description area in Magento that when clicked show as a large size in the main image box. The same as what is happening on this page with the different colour options: http://www.weddingstar.com.au/product/love-bird-damask-nut-free-gourmet-milk-chocolate-bar
Any ideas on how to do this would be appreciated. Thanks!
you could take the elements of media.phtml and put it in the description.phtml file. There is a better way to do it but thats a quick and relatively easy way to get it done and polish later. hopefully thats a nudge in the right direction.
I am new on the JavaScript and HTML. I am on learning process. I successfully made a cube and textured it. I also want to add different html link to open pages in "iframe".
I used the example of http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html
This is what I did http://olcaysahin.com/pages/cube.html
If anyone knows any tutorial or similar approach to make each face clickable, appreciated.
Thanks
Have a look at http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html.
The from variable intersects, you can determine which face was clicked on from either the faceIndex or the face normal.
What are my options for rotating an image on a web page through the Y-axis? I'm not sure if I even have the terminology right. Is this called a rotate or a transform. Most of the searches that I've done with "rotate image" show images being turned. What I'm looking for is the mirror image of the image or what it looks like if you were standing behind it.
I'm looking for something that might be available as a plugin to jQuery or something that can be done with CSS3 or HTML5. I'm also considering doing this in Silverlight but I'm still trying to find an example of what this on the web...
I think this is, what you seek:
http://plugins.jquery.com/project/reflect