Warning: I'm a noob. The little I know comes from fiddling around.
I maintain a hobby website of images created in bootstrap 3 and I would like to have a responsive rollover image that also links to the full size image.
I have been able to complete the responsive rollover part, but I can't figure out how to add the link to display the full image.
Here's what I have so far:
https://jsfiddle.net/11cmcznn/
HTML:
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div>
I can't post the CSS because I don't have reputation points yet.
Any help would be much appreciated.
Put href before the div and make sure you close the parent div too. Like this
<div class="rollover-wrapper-1"><div class="rollover-image-1"></div></div>
Well I've run into another problem. I have the rollover image working properly including linking to the full size image. But for some reason whenever I add the code to the webpage and the style sheet, somehow the webpage is looking for the style sheet in the wrong place on my website.
I have a style sheet "default.css" that I use for all my webpages. This css sheet is in the root of the website. But for some reason the webpage with the rollover image will not display the image, and when I inspect the element within Chrome it gives me 404 error stating that the default.css is not found in a certain folder on the website. I've never had the default.css in any folder besides the root.
So somehow the webpage is looking for a style sheet in a place where none exists, and I have no idea why.
If I copy the default.css style sheet from the root into the folder it's looking for then the webpage loads properly, but I don't want to have to maintain two identical style sheets. I just don't know how the style sheet got attached to the webpage.
I'm sorry for the vagueness of this problem, but I don't know enough to make a more informed question.
Related
what I would like to do in RED BOX:
hello. obviously I am new and very much a beginner.
I am using ember.js for my application frontend and bootstrap to ease the styling process. I want to build a top fixed menu bar like the picture attached and a left navigation bar with scrolling like the picture attached. maybe because I am new thats why I am unable to use the manuals properly to land me at this point.
if anyone choose to help, need to know 1st that if there are already defined builtin components in ember.js to solve this issue (I am using ember v3.18), I am unable to find any.
2nd, if 1st question answer is no, then how can I build it - or are there any suggestive codes available online for me to learn from?
Being new to Joomla I do not know all the tricks for troubleshooting etc. Currently I have a page that has a section of content on it. The content is created by DT Register but I've been through the CP several times and cannot find the section?
I hope someone is up and can share with me how to track down where pieces of content come from so I can find where this is being generated and change as needed.
The page in question is a DT Register form. I can locate and modify every section of the page EXCEPT one.
The section is titled USER INFORMATION and captures userid & password to create an account. Looking at the element in developer tools it would appear it is part of the dt register generated code but as I mentioned I can't find it.
The sandbox I am playing in is here: http://take7.lamplighterguild.com/index.php/register?eventId=15&controller=event&task=individualRegister
The section is towards the top and is hard to read on the page...which is why I want to find it.
Thank you for any help or direction.
So unfortunately my question was poorly worded. I have no trouble at all getting the css changed. It is the origin of the content that I am really trying to track down. Where does it come from etc. Is there a way to detect if it came from an article, or a component, etc. I thought there might be clues as how to figure that out.
For troubleshooting issues like this, tools like Firebug or Web Inspector for Chrome and Safari are your go to tools. If you aren't already familiar with them you'll find lots of help online.
There is default body text styling of colour #D9A362 getting into your page from one of the stylesheets. I can't find the source quickly myself, though it's easy enough to write an override.
One place you could do this is open http://take7.lamplighterguild.com/templates/theme1001/css/template.css with a text editor. Below the existing body rule # line 7, add something like
body.cssstyle-style1{
color:black;
}
This will fix the H2 text at the top of the page which you mention, plus the 'user information' line immeadiately above the form.
Hope this helps!
EDIT
You have something which is writing the following style to your page head and this is the culprit:
body {font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:21px; color:#D9A362; }
It's even on your home page so it's not necesaarily related to DT Register. To me it looks like it's coming from your menu extension.
Right now I am using one webview to show data from my aplicationDatadirectory, here everything is working fine, I get content when user click next back respectively. Now what I am doing is in onload of webview I register "touchevent" and "touchmove" in webview's html like this :-
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
on the basis of this I find swipe event. I get correct html in webview(I can see images). But I am unable to get touchstart and move call. I dont know what is the problem here. I set data in webview using url here.
Now when I set data in webview using html(I used data of my html file(given below) in one var) now I am unable to see images it just shows me one black border(empty) but here my touchstart and touchmove events are firing also my swipe is also working as expected. I am checking this functionality in iPhone.
Can any one find the issue what is going wrong here? Thanks.
I think that this depends on the time when you apply
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchstart", function mytouch(){Ti.App.fireEvent("touch", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
$.webview.evalJS('document.getElementsByTagName("body")[0].addEventListener("touchmove", function mymove(){Ti.App.fireEvent("move", {X:event.touches[0].pageX,Y:event.touches[0].pageY,length:event.touches.length});}, false);');
If you use the html property data is loaded immediately and you can use the code exactly after setting html content. If you use the url (even if it is located locally, which might be difficult for android) then you need to wait a short time until the page is loaded. There is also an event listener for that (web view-event load) but i can't say if that works for local resources but i don't think so.
In this case you should apply your javascript snippet into your html resources (if they are locally) instead of manually adding it using evalJS.
Please note that there is an issue on android that you can't use local images (resources folder) in your webview when you provide the content via html property.
I made it swipe working in iOS(in android it was working).
I did not expect this thing to be a reason but I do not know logic behind it. I was accessing .xhtml files from application data directory and it was working without any issue in android but in iOS it was not.
I just change(rename in my code) .xhtml file to .html and now it is working. :)
Hope this can help someone who is looking for the same.(or just for his interest)
Thanks.
I am developing a template for bigcommerce site, where i want to show category list and some hard code links in the place of Page menu. Now what i do, just place this %%Panel.SideCategoryList%% in the upper navigation area. Which shows category list right.
But the problem is that i didn't find this %%SNIPPET_SideCategoryList%% file. (In snippets folder exist a file with this name, but that file doesn't work even if i remove all contents of that file.)
I had a similar issue with SNIPPET_SideShopByBrandList.
I logged a ticket and got the following response:
Thank you for contacting BigCommerce technical support.
I see its reference in SideShopByBrand panel. In the same panel, there is another SNIPPET_ShopByBrandAllItem which is visible in snippets tree, but not this one. That's because its a hidden snippet, and its not possible to edit this.
I have tested this in my personal store as well, and the output is same. let me know if you have any other questions.
I think yours might also be a "hidden snippet and not possible to edit"
No worry....You need to just create html page and put the below code but keep one thing don't include the html, head, body etc
1) just create a html page and delete the html content
2) put the below my code for
3)
<li class="%%GLOBAL_LastChildClass%%">%%GLOBAL_CategoryName%%
%%GLOBAL_SubCategoryList%%
</li>
Hey everyone, I would appreciate a pointing in the right direction with the problem I'm having. In short, I'm working on an application that will create PDFs using TinyMCE and ColdFusion 8. I have the ability to create a PDF by just entering in text, pictures, etc. However, I want to be able to import an html template and insert it into the TinyMCE .
Basically, I have a file directory code snippet that lets me browse through my 'HTMLTemplates' folder, and am able to select an HTML document. Now, I want to be able to take all the code from that selected HTML document and insert it into my TinyMCE box. Any tips on how I might do this, maybe?
Thanks!
If I understood you correctly, you already have a TinyMCE plugin which pops up a window and allows you to browse the certain directory using existing cfm page which you render within the popup window. Right?
If not, you should start with this. Not sure how easy it is done in current version, but in the older TinyMCE I've created the custom upload plugin (needed to track the site security permissions for current user) pretty quickly.
Next, I can see two quick ways to pass the server file contents to the client-side:
Make it available via HTTP so you can make the GET request and read contents into the variable.
Output it on the page using CF (say, on form submit when file selected) and grab using JavaScript.
I'd personally tried the second option. After you grab the text into the variable you can put it into the TinyMCE using it's API.
It can be as simple as output escaped text into the hidden div with known ID and read it using DOM operations (assuming that there is cfoutput around):
<div id="myTemplate">#HTMLEditFormat(myFileContents)#</div>
Also you can output the text directly into the JavaScript variable (of cource, with accurate escaping), maybe like this.
<script type="text/javascript">
var text = '#HTMLEditFormat(myFileContents)#';
</script>
Most advanced and possibly better for performance (and definitely "cooler") way is to use the concept of script tags as data containers, like this:
<script type="text/plain">
#HTMLEditFormat(myFileContents)#
</script>
Last time I've seen this in Nadel's blog, I think. Read it, pretty interesting.
Hope this helps.