Gtjkyu

Posts

Showing posts with the label html

HTML webpage with all css in Angular app

HTML webpage with all css in Angular app I'm new to Angular and trying to resolve problem concerning displaying HTML website in my Angular application. The webpages with all resources like images, css files etc. are stored on external server. Sites contain text, images, own styles, css etc. Everythink works fine when I open such website in web browser. When I trying to display such page inside my application a lot of problems aren't resolved. I used innerHtml to diplay page in application: <div [innerHtml]="content"></div> All links are being changed to be direct before displaying. Text and images display but styles aren't applied. Maybe the problem is connected with the fact that links to .css are located in <"head> block? Hope sb had problem like me and can help :) Thanks in advance. I think you need to use a Sanitizer (angular.io/api/platform-browser/DomSanitizer) – John Jul ...

How would I add a download link into the second image of this script

How would I add a download link into the second image of this script This is the script I am working with (below) As the images are built into the script I am unsure on how to add a download link/link to website. to the second image The script changes from image 1 to image 2 after 10 seconds and then I want then to be able to CLICK image 2 (like a button) Here is the script I am working with if you could maybe help me with adding it in or tell me what I need to add in and where that would be much appreciated <!DOCTYPE html> <head> <title>Demo</title> </head> <body> <img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" /> <script> setTimeout(function(){ document.getElementById("img1").src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRUtUquo3icuhJzSujUuddhZlSMfkTmy6XXOStmPDM7iZzu8iOI76sqlbga8y6StiNThGwWVrURZeEPdv7cxK8c0DAxkCvkCo3VGSwEgbSKrgvbz7Y2tT7QgN3euh4TSweJn_GOjN-7iK...

How to add a class to a WooCommerce product within the product loop

How to add a class to a WooCommerce product within the product loop I would like to add multiple bootstrap col classes to this line of code inside the product loop but I have no idea. <li><?php wc_product_class(); ?></li> Can I somehow push my classed into this bit of php and still keep the product applied? 2 Answers 2 try this <li <?php wc_product_class("col-md-4 col-sm-6 custom-class m-4"); ?>></li> <li <?php wc_product_class("col-md-4 col-sm-6 custom-class m-4"); ?>></li> For this wc_product_class(); uses two arguments one is class name and other one is product id so just pass your class name as first argument and product id in second one. wc_product_class(); you could see the wc_product_class() in /woocommerce/includes/wc-template-functions.php For example your class name is test and product id is 143 then just pass ...

Disable the drop down using JavaScript

Disable the drop down using JavaScript There are two drop down boxes, when I select option 5 in first drop down then another drop down box should be disabled. While, drop down values are fetched from database. <tr> <td class="outside scrollable-menu" style="border-style: none; border-bottom-style: none;"> Education<span style="color: red;">*</span> <form:select path="educationBean.educationId" id="education" class="form-control modalEdit"> <form:option hidden="hidden" value="">Education</form:option> <c:forEach items="${educationList}" var="education"> <form:option value="${education.educationId}">${education.educationName} </form:option> </c:forEach> </form:select> </td> <td class="o...

Select dropdown color changing [duplicate]

Select dropdown color changing [duplicate] This question already has an answer here: I have created a sample dropdown list (the code is below). I want to change the font color of the "Pick a Country" which is displaying in the select option: The default text color is black and I want to change it to red. <select id="select-id"> <option value="" selected="">Pick a Country</option> <option value="">India</option> <option value="">Sri Lanka</option> <option value="">Sweden</option> This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question. You need to integrate JavaScript/Jquery script for this task. I think you want to show red color only for selected country? – sohan verma Jul 2 at 9:51 ...

How to change normal behaviour of input submit button for unfilled and required inputs?

How to change normal behaviour of input submit button for unfilled and required inputs? Say you have an html form like the one below. <form> <input type="text" required> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <input type="submit"> </form> If you click on the submit button without filling the required input, three thing will generally happen. Here is a jsfiddle to see this in action.http://jsfiddle.net/q47kepd0/ I am working on a project where I am making an html file version of a wordpress theme. In the theme the first thing that involves scrolling does happen but the second and the third things don't. So there must be a w...

Centering tooltip?

Centering tooltip? I'm trying to get my tooltip to be at the top & center of my page, regardless of window size and screensize. I have the following, but my tooltip appears on the top left corner: <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <style> area { display: inline-block; } </style> <script> $(function() { $( document ).tooltip({ position: { my: "center bottom", at: "center top", } }); }); </script> Can you please post you HTML code or create a jsfiddle? Using your JS code I can't reproduce the issue. –...

How to give a colour property to top and bottom border line of a row I was wondering how to colour the top and bottom border line of each rows, and disable the sides colour of it, I have attached a pic of what I am trying to achieve. Please provide a Minimal, Complete, and Verifiable example. Please look at guide how do I ask a good question? – Andrzej Ziółek Jul 2 at 9:36 3 Answers 3 Use border-bottom/top (means border only to top and bottom ) border-bottom/top top bottom td, th { border-bottom: 1px solid #dddddd; border-top: 1px solid #dddddd; } Learn here:https://www.w3schools.com/css/css_border.asp See example: table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border-bottom: 1px soli...

Getting the Height of Navigation bar dynamically in CSS

Getting the Height of Navigation bar dynamically in CSS My website is based on React and react-strap. Well, I had my .header-overlay to cover the whole entire background in .header . But what is happening here is that because of the .navbar , the .header-overlay sticks out of .header vertically. .header-overlay .header .navbar .header-overlay .header I figured that using calc(100vh - heightOfNavigationBar) would resolve this. But, I couldn't find any way to get the height of .navbar by dynamically. Is there any way to resolve this? (navbar is embedded in react-strap) calc(100vh - heightOfNavigationBar) .navbar CSS CODE: .navbar{ font-size: 20px; } .header { background: url("../images/headerbg.jpg") no-repeat 50% 50% fixed ; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; height: 100vh; } .header-overlay { background-color: rgba(31, 31, 31, 0.4); height: 100vh; } HTML C...

Bootstrap carousel doesn't slide

Bootstrap carousel doesn't slide I absolutely do not understand why the bootstrap carousel code doesn't work at all with me. It's strange, i took the example which is on the bootstrap website, just customized some little things it should be work. I think it's a problem of version of bootrstrap or jquery but both of them are the last ones i found so i do not see where the problem come from. If anyone could help me, please ^^ #carouselReactions { margin-top: 25px; display: flex; flex-direction: row; justify-content: center; width: 100%; height: auto; } #carousel-left-control { width: 5%; display: flex; justify-content: center; align-items: center; } #carousel-text { width: 50%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } #carousel-text h3 { color: #0C0C0D; } .carousel-inner, .carousel-item { position: relative; text-align: center; } #carousel-right-control { width: 5%; dis...

GET http://localhost:4200/logo.jpeg 404 (Not Found) [closed]

GET http://localhost:4200/logo.jpeg 404 (Not Found) [closed] Getting this error everytime I try to add image using in angular from my computer This question appears to be off-topic. The users who voted to close gave this specific reason: Did you add logo.jpeg to the assets folder? And Can you add the code where you are trying to get the image? – Anuradha Gunasekara Jul 2 at 7:23 The image is not available, that's why! crosscheck whether your image is added or you misspelled the name – V5NXT Jul 2 at 7:25 @AnuradhaGunasekara probably is right. There is an assets folder which is intended to use for static content. Put your image in there a...

Focus on Collapse Div

Focus on Collapse Div How can I focus the div of a bootstrap collapse using jquery. Here is my script: <div class="tab-pane fade in active" id="home1"> <div id="treeMapCategory"> <h2 class="m-b-xxs">Defect Categories<span class="btn btn-primary btn-xs pull-right" id="defectCategories" data-toggle="collapse" data-target="#insightDefectCategories"><i class="fas fa-comments"></i> Add Insights</span></h2> </div> </div><br/> <div class="collapse" id="insightDefectCategories" tabindex="1"> <div class="ibox-content box"> <div class="insightsTitle"><br/> <h3> <i class="fas fa-comments"></i> Insights for Defect Categories</h3> </div> </div> </div> Possible duplicat...

Angular 2 or 4 or 5 or 6 drag and image upload is not working? [closed] I want angular 2 or 4 or 5 or 6 drag and upload image examples. Drag and drop image upload is not working properly and the image is not visible properly. It is an blur image. Please look at the below image. ngx-Dropzone-wrapper . ( Code is here ) The image is coming like this. If the container width is less also it is working like this only. Please look at the example, link Please look at this example link, If u uplaod any image here, it is displaying as an blur image only. Please help me how an I fix this. If I expand the box size also, i want the image as same clarity. And it should be visible properly. Any other examples are there to drag and upload the image in angular? can anyone please help me to do this? This question appears to be off-topic. The users who voted to close gave this specific reason: Can you share your code as a MCVE on StackBlitz? – aloisdg ...

html code for twitter button is wrong

html code for twitter button is wrong <a href="https://twitter.com/TwitterDev" class="twitter-follow-button" data-show-count="false">Follow @TwitterDev</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> Error parsing XML, line 8, column 133: Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. How do I fix? sorry, I have very little html background This is HTML, not XML ... did you save it incorrectly as an *.xml instead of an *.html file? – Jonathan Lam Jul 13 '16 at 2:43 *.xml *.html I was using blogger and I pasted the html from twitter button help. The error message given on blogger was xml ...

How to paginate more than two object lists in one page - Django get_context_data()

How to paginate more than two object lists in one page - Django get_context_data() Suppose I have two or more than two object lists objects_a and objects_b in Views.py with get_context_data() of Django , and I would like to paginated for objects_a and objects_b, I pasted my objects_list.html as below too, which can only paginated one of objects, objects_a or objects_b, how to paginated both of objects? objects_a objects_b get_context_data() of Django I have more than two object lists, four or five lists, how to paginate more than two object lists in one page? Thank you so much for any advice. class ObjectListView(PaginationMixin, ListView): model = Object ordering = ('name', 'department') context_object_name = 'objects' template_name = '' paginate_by = 20 def get_queryset(self, **kwargs): queryset = Permit.objects.all() return queryset def get_context_data(self, **kwargs): ................. ob...

How to put no limit in database- codeigniter

How to put no limit in database- codeigniter I am using this to get results from a database, but it limits to 1 record. I don't want any limit; I tried removing it but that doesn't work . $this->db->from('links'); $this->db->where('uniq', $nnn[0]->uniq); $this->db->limit(1); $q = $this->db->get(); $nnn[0]->linkos=$q->result()[0]; return $nnn; what happens if you remove this line $this->db->limit(1); ? – shyammakwana.me Nov 8 '17 at 22:27 $this->db->limit(1); dont work , i mean that dont effect anything , – Asokh Roy Nov 8 '17 at 22:28 try printing sql query, and check what's final query ...

Border is not drawn around the picture in CSS

Border is not drawn around the picture in CSS I have a question regarding drawing a border around an image uploaded on the HTML. This is my code in HTML: .imagec { display: block; margin-left: auto; margin-right: auto; border: black block 2px; } <img class="imagec" src="https://via.placeholder.com/100x100"> I do not know why a border is not drawn around my picture:( In addition, I cannot draw a border around my HTML page too :( 4 Answers 4 You have to do it as below: border: 1px solid black; Insted of border: black block 2px; Learn here:https://www.w3schools.com/css/css_border.asp .imagec{ display: block; margin-left:auto; margin-right:auto; border: 2px solid black; } html{ border: 2px solid black; } <img class="imagec" src="https://material.angular.io/assets/img/examples/shiba1.jpg"> that what you mean??? ...

Size attribute for an input field not being honored

Size attribute for an input field not being honored Taken directly from W3Schools: Definition and Usage The size attribute specifies the width of an input field. For <input type="text"> and <input type="password"> , the size attribute defines the number of characters that should be visible. For all other input types, size defines the width of the input field in pixels. <input type="text"> <input type="password"> So.. If that is true why is my field <input type="text" size="2"/> wide enough to display 5 CAPTIAL MMMMM's ? <input type="text" size="2"/> people hate w3schools so much..i think they are "bad" but not that "bad" – Benny Tjia Jul 14 '11 at 20:52 Update...

Looking for a good floating lable implementation that works with Bootstrap

Looking for a good floating lable implementation that works with Bootstrap Does anyone know of a good floating label implementation that will work with Bootstrap on all browsers. I found one from Material Design (code below), but I would like the textbox to have a border and the placeholder to transition into something like a fieldset's legend. Any implementation that works on all browsers would be appreciated. Here is the Material Design stuff: .form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } <div class="container my-5"> <div class="row"> <div class="col-md-6 mx-auto"> <div class="form-group"...

Bootstrap - custom alerts with progress bar I am trying to customize the bootstrap 3.3.7 alert class in order to add a progress bar and inline items to achieve something like this ( the dotted line is just to demonstrate that items are aligned ): alert However, I have problem in fitting the progress bar at the bottom of the right part with a width of 100%. Also, I have problem to adjust the height of the left part to 100% and ajust the icon in the middle. width height I am not sure if I am using the correct css strategy, but this is what I have done so far: /* !important are just used to overide the bootstrap css in the snippet */ .alertContainer { border-radius: 0 !important; border-width: 0 !important; padding: 0 !important; height: auto !important; position: absolute !important; bottom: 15px !important; left: 0; right: 0; margin: 0 auto !important; width: 480px !important; } .leftPart { display: inline-block !important; height: 100% !important; width: 32...